본문 바로가기

Computer/HTML5

웹표준 CSS3 강좌 27. 텍스트 관련 스타일 속성! 문단정렬과 줄간격, 자간 조절하기 웹표준 CSS 강좌 26강에서는 폰트 스타일 속성에 이어, 텍스트 자간과 텍스르 정렬하는 방법, 줄간격 조절하는 방법 등 텍스트 스타일 속성에 대해 알아보겠다! 과거와는 달리 요즘 웹문서에는 이미지와 동영상이 많이 들어간다지만 웹문서는 문서이기 때문에 텍스트 스타일 속성이 굉장히 중요하다. 자간과 문단정렬, 줄간격에 대한 내용은 아래 포스트 참고http://namcreative.tistory.com/108 ㅣ웹표..
웹표준 CSS 강좌 26. 스타일 시트 폰트 관련 속성 웹표준 CSS 강좌 25강에서는 스타일 시트를 통해 폰트를 웹페이지에 적용하는 방법을 알아봤다. 오늘 26강에서는 폰트와 관련된 스타일 시트 속성, 폰트 크기를 지정하는 font-size와 폰트 굵기를 지정하는 font-weight, 이탤릭체로 표현하는 font-style에 대해 공부해보겠다.   ㅣ웹표준 CSS 강좌: font-size 폰트 크기 선택자 { font-size: px;..
CSS3 강좌 25. 웹폰트 스타일! 구글 웹폰트 적용하는 방법 웹개발 CSS3 강좌 25강! 예전에 CSS3는 HTML5라는 알몸에 옷을 입히는 일이라고 묘사했다. 옷을 입히려면 어느신체부위에 어떤 옷을 입힐지 정해야 하는데 지금까지 CSS3 강좌를 통해 배운 선택자가 바로 옷을 입힐 신체부위를 정하는 일이었다. 오늘부터 배울 것이 '어떤 옷을 입힐까?'다. 대상은 바로 웹문서의 꽃인 폰트! ㅣCSS3강좌: 폰트 스타일 시트선택자 { font-family: 폰트명;}웹문서를..
웹개발CSS3 강좌 24. 일반 구조 선택자와 부정 선택자 웹개발 CSS3 강좌 24강은 선택자의 늪에서 빠져나오는 마지막 강좌로 일반 구조 선택자와 부정 선택자에 대해 공부하도록 하겠다. 물론 이외에도 다양한 선택자가 있지만 CSS 작업을 할때 많이 사용되지 않기 때문에 생략하고 나중에 필요한 순간에 따로 설명하도록 하겠다.  ㅣ웹개발 CSS3 강좌: 일반 구조 선택자태그:first-child { }태그:last-child { }태그:nth-child( ) { }태그:nth-l..
웹개발CSS3 강좌 23강. 속성 선택자와 반응 선택자 웹개발CSS3 23강은 특정한 속성 값을 가지고 있는 대상을 선택하는 속성 선택자와 마우스 반응에 따라 스타일 시트를 적용하는 반응 선택자에 대해 알아보겠다! HTML 강좌에 <input>태그의 늪이 있었다면 CSS 강좌는 선택자의 늪이라는; 계속 선택자가 나와 지루하겠지만 다양한 선택자를 적절히 다룰 수 있는 것이 Web 개발자의 실력을 좌우한다!   ㅣ웹개발CSS3 강좌: 속성..
웹개발CSS3 강좌 22강. 스타일 시트 자식과 후손 선택자 웹개발CSS3 22강은 21강에서 예고한 대로 태그의 부모와 자식, 그리고 후손에 대해 자세히 설명(이미 지난번 강좌로 감을 잡은 사람들이 많겠지만)하고 자식과 후손을 선택자로 잡는 방법을 알아보겠다. 사실 CSS3를 하는데 기본 선택자(전체, 태그, 클래스, 아이디 선택자)만으로 충분하지만 다양한 선택자를 알아두면 활용도가 높다. ㅣ웹개발CSS3 강좌: 부모와 자식, 그리고 후손  태그안에 있는 속해있..
웹표준CSS3 강좌21. 캐스캐이딩 스타일 시트의 규칙! 우선순위와 상속 웹에서 캐스캐이딩 스타일 시트(CSS, Cascading Style Sheets)는 선택자를 정하고 해당 선택자에게 속성과 속성값을 적용하는 일종의 규칙이다. 이 규칙을 만드는 것은 사람인 웹 개발자이기 때문에 규칙을 잘 못 만들어 규칙과 규칙이 충돌할 수 있다. 이 경우 스타일 시트는 특정 규칙을 우선시 하는데 이를 우선순위(캐스캐이딩 Cascading)라고 한다. 오늘 웹표준 CSS3 21강에서는 우선순위와 상속의 개념을 알아보도록 하겠다. ..
웹표준CSS3 강좌20. 스타일 시트 기본 선택자에 대해 알아보자! 웹표준 CSS 19강에서는 HTML의 단짝친구인 CSS가 도대체 어떤 놈인지? 그리고 어떻게 사용하는지를 맛보기로 다뤘다. 지난번 강좌에 설명했듯이 CSS는 웹문서가 입는 옷과 같다. 그런데 옷을 입으려면 어느 부위에 뭘 입힐지 결정해야 한다(예를 들면 하의에 바지를 입을지 치마를 입을지). 이를 결정하는 것이 바로 선택자! 오늘 웹표준 CSS3 20강에서는 선택자에 대해 공부해보겠다. ㅣ웹표준 CSS3 강좌: 스타일 시트 선택자선..
웹표준 CSS3 강좌 19. 스타일 시트란 무엇인가? CSS(캐스캐이딩 스타일 시트, Cascading Style Sheets)는 HTML의 단짝 친구로 오늘날 웹에 필수적인 아이다. 책이나 검색으로 찾아보면 HTML이 웹문서의 내용을 담당하고 CSS는 웹문서의 스타일(색상이나 배치 등)을 담당한다고 설명하는데 CSS를 어떻게 사용하는지 본 적이 없다면 확 와닿지는 않을 것이다. 그래서 오늘 웹표준(HTML5 + CSS3) 19강에서는 CSS가 도대체 뭔지? 어떻게 사용하는지? 살펴볼 것이..
HTML5 강좌18. 웹사이트 레이아웃 구조와 시맨틱 태그 그동안 무려 4강에 걸쳐 <input>태그를 배웠는데 너무 길어서 지친다ㅋ 뒤에 더 공부해야 할 내용이 있긴 하지만 그냥패스! <input>태그 외에도 강좌에서 설명하지 않은 태그들이 많이 있으니 궁금한 사람은 학원이나 책을 통해 배우도록하시오! 오늘 HTML5 18강은 웹사이트의 구조와 시맨틱 태그에 대해 공부하면서 이제 HTML 기초강좌는 끝내고 CSS로 넘어가도록 하겠다.같이 읽으면 좋은 포스트:웹사이트 레이아웃과 시선의 ..
HTML5 강좌17. 사용자 편의를 위한 <input> 태그의 속성 HTML5 17강은 지난 강좌에 이어 또 <input>태그에 관한 내용이다ㅋㅋㅋ 지금까지 <input>태그의 다양한 type 속성값에 대해 공부했는데 오늘은 type외에 사용자가 입력을 좀더 편하게 하기위해 사용하는 <input>태그의 속성을 공부할 것이다.   ㅣHTML5 강좌: 사용자 편의를 위한 <input>태그의 속성 <input autof..
HTML5 강좌16. 입력태그의 다양한 type에 대해 알아보자 - 2편 HTML5 16강은 지난 강좌에 배운 입력태그 Type 값(입력창, 숫자 개수입력, 체크박스, 버튼)에 이어 오늘도 입력태그 Type에 대해서다; 도대체 언제쯤이면 입력태그의 늪에서 벗어날 수 있을까ㄷㄷ; 15강에 배운 Type 값에 비하면 잘 쓰진 않지만 그래도 알아두면 언젠가 쓸일이 있을 법한 Type 속성값들을 준비했다. ㅣHTML5 강좌: 날짜 정보를 입력하는 type<input type = "date" >..