
        
            I like tacos!
            I like pizza!


div div p {
    /*CSS stuff!*/
}

정확히 말하면 p의 부모가 div이고 그 div의 부모가 또 div일 때 위 효과를 준다는 의미이다. 여기서 말하는 부모는 조부모가 될 수도 있고 증조부모가 될 수도 있다. 만약 직접적인 부모 관계인 경우에만 효과를 주려면 다음과 같이 한다.


div > p {
    /*CSS stuff!*/
}

==== Pseudo Selector ==== 기본 형식은 다음과 같다.


selector:pseudo-class_selector {
    property: value;
}

보통은 a 태그에 효과를 줄 때 많이 쓴다.


a:link {
    text-decoration: none;
    color: #008b45;
}

a:hover {
    color: #00FF00;
}

a:visited {
    color: #EE9A00;
}

특정 자식 태그에만 효과를 줄 때에도 쓴다.


/* p 태그가 어떤 태그의 첫 번째 자식인 경우 */
p:first-child {
    font-family: cursive;
}

/* p 태그가 어떤 태그의 두 번째 자식인 경우 */
p:nth-child(2){
    font-family: Tahoma;
}

/* p 태그가 어떤 태그의 세 번째 자식인 경우 */
p:nth-child(3){
    color: #cc0000;
}

===== 박스 모델 ===== 박스 모델은 컨텐츠의 넓이, 컨텐츠의 높이, 패딩, 테두리, 마진으로 이루어져 있다. 아래 이미지는 컨텐츠 영역과 마진, 테두리, 패딩이 어떻게 연된되어 있는지 보여준다. **box를 이루고 있는 요소** * content : 요소가 담고 있는 내용 * padding : content와 border사이의 간격 * border : 테두리 선 * margin : border와 다른 요소 사이의 간격 {{https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/module/441/1245.gif}} ==== 종류 ==== **블록 레벨 엘리먼트(block-level element)** * 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트 * 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다. * DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등 **인라인 엘리먼트(inline element)** * 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트 * 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다. * a, img, em, strong등 display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다. display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다. ===== Positioning ===== ==== Margin, Padding ==== ==== float ==== ==== Positioning ==== === absollute === === relative === === fixed === ===== 참고 ===== * [[http://opentutorials.org/course/718/3798|생활코딩 CSS 사전]] * [[http://jsfiddle.net/|JSFiddle]]

Objective

Experience

Skills

Education