가상클래스



맏이만 선택해 주는 :first-child 가상클래스


가상클래스는 특정한 '사건'이 발생하면 사용할 수 있습니다. 그리고 특정한 '조건' 에도 사용할 수 있습니다.


:first-child 가상 클래스는 동일한 요소 중 가장 앞에 위치한 요소를 선택하도록 도와줍니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:first-child {font-weight:bold;color:red;font-size:25px;}


위의 예제는 4개의 동화 이름을 <ul>을 이용해서 목록으로 만든 것입니다. CSS를 보면 :first-child 가상 클래스를 이용해서


맨 앞에 있는 <li>만 텍스트의 크기와 색상을 바꾸도록 해두었습니다. :first-child는 이처럼 지정한 태그 중 가장 선두에 


위치하는 녀석을 선택할 수 있게 해줍니다. 결과 화면은 다음 그림과 같습니다.





라디오 버튼과 체크박스가 체크되어 있는지 점검하는 :checked 가상클래스


해당 클래스는 CSS3에 새로 추가된 가상 클래스입니다. 라디오 버튼이나 체크박스는 사용자가 직접 체크하고 체크를 해제할 


수 있는 UI 입니다. 이것들이 체크 되었을떄는 'checked'속성을 가집니다. 이 가상 클래스는 'checked' 속성을 가져와서 


동작합니다. 


HTML 마크업

<label><input type="checkbox" /><span>하하하</span></label>

CSS

input:checked+span {font-weight:bold; color:#ff0000;}


체크박스가 체크된 상태일 경우 <span>으로 감싸져 있는 텍스트를 굵게 하고 빨간색으로 만듭니다. 형제선택자 '+' 와 


':checked' 가상 클래스 선택자를 결합하여 사용하였습니다.


':checked' 가상 클래스가 작동하면 <span> 에 있는 글자의 스타일을 바꾸도록 되어 있습니다.


 참고로 이 선택자는 IE 8 이하 버전에서는 작동하지 않습니다.





자유롭게 반복하거나 선택하여 요소를 스타일링하는 :nth-child 가상클래스


:nth-child 가상 클래스는 CSS3에서 새로 소개된 가상 클래스입니다. 


해당 클래스를 사용하면 테이블에서 격줄로 건너뛰면서 색상을 칠해주는 등 사용자에게 시각적인 효과를 부여할 수 있습니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:nth-child(odd) {font-weight:bold;color:red;font-size:25px;}



<:nth-child 가상 클래스에서 받을 수 있는 인자의 종류>


odd 

홀수번 요소만 순서대로 선택함 

even

짝수번 요소만 순서대로 선택함 

숫자 

 임의의 숫자값을 넣어서 자유자재로 선택


Example) tr:nth-child(2n + 1) , tr:nth-child(4)


─ tag  CSS3, html5, 가상클래스

박스모델




박스모델 개념 잡기


HTML문서는 여러 개의 태그로 이루어져 있습니다. 


HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다. 


<div>도 박스고, <span>도 박스입니다. <p>도 박스고 <img>도 박스입니다. 


각 요소들이 저마다 하나의 박스인 셈입니다. 



<CSS의 HTML 태그의 박스모델 구조도>


박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다.


실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고 


색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다.





CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다.


패딩과 마진을 조정하면서 페이지의 전체적인 레이아웃과 세부적인 레이아웃을 잡아 나갑니다.


<p>안녕하세요. p태그를 이용해서 박스모델 하나를 만들었습니다.</p>

<p> 태그의 박스모델 생성


 {border : 1px solid #000; ; width : 300px; ; padding : 10px;}

<p> 태그에 검정색 테두리 , 너비를 300px , 양쪽에 10px씩 패딩 적용


자 그럼 둥근 모서리를 갖도록 고쳐볼까요?



 {border : 1px solid #000; ; width : 300px; ; padding : 10px; , border-radius : 20px;}

사방에 20px의 값을 준 border-radius 속성이 적용된 모습


─ tag  CSS3, html5, 박스모델

특수선택자


CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 


이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 


반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 


또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다.





전역선택자


전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다.


* {margin : 0; padding : 0;}

* 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화


이 CSS의 코드는 보통 CSS문서의 최상단에 넣어서 사용할 것입니다. 문서에 있는 모든 요소의 마진과 패딩을 '0'으로 초기화합니다. CSS의 전역 선택자인 '*'은 운영체제의 '*'과 비슷한 역할을 합니다. 


다른 예제 들도 알아보겠습니다.


div * {color : red;}

div 안에 있는 자식요소들 속에 포함된 텍스트를 빨간색으로 칠함


요소 * 방식으로 스타일을 사용하면 해당 요소 아래에 있는 요소들에 스타일 적용이 된다.


* div {color : red;}

모든 div 안에 있는 텍스트를 빨간색으로 칠함


div * strong { color : red;}

div 안에 있는 자식요소들 중 모든 strong에 포함된 텍스트를 빨간색으로 칠함


전역선택자는 이처럼 전역 선택자가 지정한 요소 아래에 있는 모든 요소의 속성을 일괄적으로 바꿀 때 유용합니다. CSS의 기본적인 상속을 무시하고 강제 적용합니다.




인접한 형제 선택자


형제 선택자를 잘 활용하면 조금 더 정밀하게 스타일을 적용할 수 있습니다. 인접한 형제 선택자는 '+' 기호로 사용합니다.


h1 + p {color : red;}

<h1> 태그와 가장 가까이 있는 <p> 태그 내에 텍스트를 빨간색으로 칠함.





속성 선택자


HTML 태그에는 다양한 속성들이 함께 사용됩니다.


예를 들면 img 태그에는 alt 라는 확장 태그가 있습니다. alt 속성은 이미지를 식별 할 수 있는 텍스트를 넣을 수 있습니다.


<img src="google.gif" alt="구글">

<img>태그에 구글의 로고 이미지를 불러오고 '구글'이라는 텍스트를 alt속성에 부여


img[width|="500"] {border : 10px #ff0000 solid;}

<img> 태그로 가져온 이미지의 너비가 500px인 경우 10px두께의 빨간 테두리를 침

<img src="google.gif" width="500" alt="구글">






CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다.


HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 





태그에 직접 스타일을 주는 방법



<a href="http://www.monoeyes.com" style = "font-weight: bold; color:red;">쏭군 블로그</a>

<태그에 직접 스타일 적용하기>


이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 


위의 코드에서는 해당되는 <a> 태그 하나에만 굵고 빨간 효과가 적용됩니다. 


다른 태그들에게는 아무런 영향도 미치지 않습니다.


이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 


사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면,


 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 


그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다.





<style> 요소를 활용하여 HTML 내에서 사용하는 방법


<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<style type="text/css">

a {"font-weight: bold; color:red;"}

</style>

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>

<HTML 문서 내에 <style>태그를 사용하여 CSS적용하기>


이 방법은 HTML 파일의 <head> 또는 <body>에 <style> 태그를 선언함으로써 사용이 가능합니다. 


이 방법은 스타일이 삽입된 HTML파일, 즉 페이지 하나에 전부 영향을 미칩니다.


단, 해당 HTML파일 이 외에 다른 HTML파일에는 아무런 영향도 미치지 않습니다.





외부의 CSS파일을 링크하는 방법


a {"font-weight: bold; color:red;"}

<style.css>

<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>


이 방법은 가장 널리 사용되는 방법입니다. 아예 웹사이트의 모든 디자인 정보를 CSS파일에 몰아넣고, 


HTML에서는 이 CSS파일을 링크하여 사용하는 방법입니다. 


이 방법은 CSS파일 하나로 여러 개의 웹페이지 디자인을 관리할 수 있다는 장점이 있습니다. 


또한, 미디어 타입을 지정하여 각 기기별로 최적화된 화면을 제공할 수 있습니다.





방법별 스타일을 적용하는 우선 순위


이 세가지 방법 중 스타일을 중복 적용하는 태그가 있다면 어떤 방식이 가장 우선적으로 적용될까요? 


그 순서는 다음과 같습니다.


  • 1순위 : 태그에 직접 스타일을 지정해 주는 방법
  • 2순위 : <style>요소를 이용해서 한 페이지에 스타일을 지정해 주는 방법
  • 3순위 : 외부의 CSS파일을 링크하여 스타일을 지정해 주는 방법



─ tag  CSS3, html5

HTML5도 엄연히 하나의 문서입니다. 당연히 이 문서 안에는 글도 들어갈 수 있고 그림도 들어갈 수 있습니다. 


글과 그림은  일반 워드프로세서의 문서처럼 나열되면서 흐르게 됩니다. 그러나 일반 워드프로세서와 다른 점이 있습니다.


그것은 바로 HTML문서에는 블록레벨(block level)요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다는 겁니다.





블록레벨 요소


<div>나  <p>,<h1>과 같은 요소들은 블록레벨 요소입니다. 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를 


쓰지 않아도 스스로 줄 바꿈이 된다는데 있습니다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐릅니다.


그리고 주변에 일정량의 공간을 만듭니다. 또한 너비를 지정해 주지 않으면 풀사이가 되어 가로로 가득 찹니다. CSS를 


적용하지 않고 이 요소들을 브라우저에서 확인해 보면 세로로 쭉 나열되는 것을 볼 수 있습니다. 블록레벨 요소는 


가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다릅니다.


<h1>블록레벨 요소</h1>

<p>블록 레벨 요소는 BR태그 없이도 기본적으로 세로로 요소가 정렬됩니다.</p>

<div>너비는 풀사이즈, 그리고 위아래에 약간의 여백도 자동으로 붙고요...</div>

<블록레벨 요소의 예>




인라인 요소


<img>, <span>, <strong>과 같은 요소들은 인라인 요소입니다. 


이 요소들의 특징은 줄 바꿈 태그를 사용하지 않거나 블록레벨 태그 안에 단독으로 포함하지 않는 한 가로로 쭉 나열된다는 데 있습


니다. 그리고 이 요소들의 주변에는 공간이 생기지 않습니다.


문법적으로는 인라인 요소 안에 블록레벨 요소가 들어가면 안됩니다. 블록레벨 요소 안에 인ㄹ아ㅣㄴ 요소가 포함되록 마크업해야


문법을 바르게 준수 할 수 있게 됩니다.


<span>인라인 요소 : </span>

<strong>가로</strong>쭉 나열됩니다. 물론 너비는 딱 자기가 가진 만큼만 가지고요.

<블록레벨 요소의 예>


블록레벨 태그 안에는 인라인 레벨 태그가 들어갈 수 있습니다. 아니 들어가야만 하는 경우가 많습니다.


그러나 문법적으로 인라인 레벨 태그는 블록레벨 태그를 담을 수 없습니다. 

<블록레벨 태그와 인라인 레벨 태그를 쉽게 이해할 수 있는 구조도>


인라인 레벨 태그는 기본적으로 옆으로 흐릅니다. 블록레벨 태그는 아래로 흐릅니다.


너비 또한 화면 전체를 차지합니다. 


자 그러면 도대체 언제 어떤 태그를 사용해야 할까요?


특정단어를 강조하고 싶을때는 <b>태그보다 <strong>태그를 사용하는 것이 좋습니다. 외관상으로는 두 태그 모두


텍스트를 굵게 보이게 하여 강조해 주지만, <b>태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그입니다.


반면에 <strong>태그는 외형적으로도 텍스트를 굵게 해주고 실제로 의미있는 텍스트라고 강조해 주는 역할도 합니다.


웹사이트의 메뉴나 목록형태의 콘텐츠를 만들 때는 <ul>과 <li>태그를 조합합니다.


만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫자를 순차적으로 붙이고 싶을 때는 <ol>, <li> 를 이용하면


관리하기도 쉬운 훨씬 의미 있는 마크업이 됩니다.


<span>이나 <mark>와 같은 태그는 특정한 부분에 별다른 의미를 부여하지 않아도 시각적으로 무언가 효과를


주고 싶을 때 사용합니다. <span>으로 감싸고 CSS로 접근을 하여 스타일링을 하면 되겠습니다.


이 밖에도 주로 레이아웃을 짜거나 박스를 만들 때는 <div>를 많이 사용했는데, HTML5에서는 이것이 조금 더 세분화 되었습니다.


부분별로 <header>, <footer>, <section>과 같은 태그를 사용하면 됩니다.




<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌





헤드라인을 여러 개로 묶을 필요성이 있을 때 사용하는 hgroup 요소


만일 페이지에 산발적으로 여러 개의 헤드라인을 묶어 줘야 할 필요가 있을 경우 HTML5에서는 다음과 같이 hgroup 요소를 이용할 


수 있습니다.


<header>

<hgroup>

<h1>쏭군 블로그</h1>

<h2>열심히 살아가는 88만원 세대의 이야기</h2>

</hgroup>

</header>

<article>

<hgroup>

<h1>최근 올라온 글</h1>

<h2>최근에 올라온 글을 시간 순으로 표현합니다.</h2>

</hgroup>

<section>

<hgroup>

<h1>봉사활동</h1>

<h2>나도 그들도 짠했던 이야기</h2>

</hgroup>

</section>

<section>

<hgroup>

<h1>자전거 구입</h1>

<h2>싼 녀석을 구하기 위한 사투 스토리</h2>

</hgroup>

</section>

</article>

<aside>

<hgroup>

<h1>위젯 사이드바</h1>

<h2>개인적으로 좋아하는 위젯들 모임</h2>

</hgroup>

</aside>

<hgroup>태그의 사용 예


앞서 과거에 사용되던 방식을 사용하는 것도 괜찮습니다. 


그러나 HTML5에 추가된 <hgroup> 요소 덕분에 이 예제 코드와 같은 방식으로도 헤드라인 태그를 사용할 수 있게 되었습니다. 


H1이나 H2와 같은 높이 단계에 있는 헤드라인 요소들도 이제는 문서의 최상단의 전유물이 아니라,


 각 섹션이나 아티클 등 어디에서나 꾸릴 수 있게 된 것입니다.  이렇게 하면 각 콘텐츠가 훨씬 독립적으로 보입니다. 


문서의 의미만 잘 구현된다면 헤드라인을 어떻게 사용하여도 큰 문제는 없습니다. 다만, 앞서 설명한 방식대로 콘텐츠를 쪼개 


각 콘텐츠에 높은 레벨의 헤드라인을 부여하여 의미를 담을 수 있다는 정도를 알아둔다면 나중에 요긴하게 활용할 때가 있을 겁니다.





독립된 개별 콘텐츠를 담는 article, section 요소


섹션 요소에는 서로 다른 의미를 가진 콘텐츠를 담을 수 있습니다. 예를 들면 블로그에서 각 포스트를 요약해 둔 메인페이지가 


꾸며진 경우를 볼수있는데, 그 요약된 포스트들의 묶음을 <section>태그로담고 각개별 포스트는 <article>태그로 묶으면 됩니다.


빨간색 박스로 되어 있는 부분은 <section>태그로 감싸고, 파란색 부분은 <article>태그로 담아내면 될 것입니다. 


<section>

<article>

<h1></h1>

</article>

<article>

<h1></h1>

</article>

<article>

<h1></h1>

</article>

<section>


<article> 요소에는 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알 수 있는 콘텐츠를 담으면 됩니다.



<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌









─ tag  article, CSS3, hgroup, html5, section
openclose