layout

#wrap {
width:800px ; /* 단위 생략하면 개수로 파악 */
height:500px ;

}

#wrap span {border:blue 1px solid; padding:10px ; display:block}
/* (한 칸 띄어쓰기) 자손선택자 */
#wrap>span {background-color:yellow} /*  자식 선택자 */

#wrap>span>span {background-color:green} /* 자식의 자식 선택 */

#wrap>ul {border:purple 1px solid ;
padding-left:0px ;  /* padding:0 도 가능 */
text-align:center;
font-size:0px;    /* 스페이스(한칸) 간격을 0으로 설정하기 위해 */
}

#wrap>ul>li  {border:#F3F 1px solid ; /* wrap>li 안 먹는다.  */

<li>001</li><!– 주석 처리 하면 붙는다.  스페이스 있으면  li간 공간 준다. 혹은 엔터값 지운다.
–><li>002</li>

#ex,#ex2 /* , 그룹 선택자 ,    ,.  , .  둘 다 가능*/
{width:150px;
height:100px;
position:absolute;  /*  블럭만 먹는다.   static : 그냥 기본 개념대로 //z-index 제일 아래 absolute,relative 가 위  */
left:50%; /* 시작점이 50% */
top:50%;
margin-left:-75px;
margin-top:-50px;
box-sizing:border-box; /* border-box : 콘텐츠의 크기 기준점 설정(선 두께 포함) */
}

#ex3
{width:40px;
height:30px;
margin:0;
padding:0;
position:relative;
left:90px;
top:10px;
background-color:red;
border-radius:10px;
/* left,top(절대좌표)의 기준점이 되는 속성*/
}

div #wrap div 중 wrao id // 띄어 쓰기에 따라 다르다.
div.wrap 클래스를 가진 div
border-color 대표속성-단일속성

#wrap #gnb ul {  overflow:hidden;
padding:20px;
}
/* float(li)의 마진겹침 현상을 방지.이미지 안 보이는 거 짤라버리고,
레이아웃 관련 된 요소 이용해서 높이 폭 적용 */

/*자식은 꺽쇠 자손은 한 칸 띄기*/

<nav id=”gnb”> <!– 메뉴 의미의 시맨틱 태그  많이 쓰는 아이디 명 global navigation bar –>

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.