처음으로 여행안내 소개합니다 오시는 길 이용방법 객실요금 요금안내 예약하기 예약확인 게시판 공지사항 Q&A 사이트 맵 #nav{ width: 1000px; height: 45px; padding: 6px 7px; background: #999999; margin: 0 auto; } 직계자식 선택자에게 속성 추가 /* 자식 선택자를 통해 직계 li에게만 속성을 적용 */ #nav > li { float: left; position: relative; } margin: 3px 10px; margin-left: 80px; #nav li a { display: block; font: bold 20px sans-serif; color: #eeeeee; padding: 10px 20px; } /*li에 마우스를 올..
.t { width: 100px; height: 100px; background: #fed9ff; border-radius: 0px; transition-property: background-color, border-radius; transition-duration: 1s; /* 1초에 걸쳐 배경색과테두리를 변경할 예정*/ transition-delay: 2s; /* 2초 후에 변경*/ } .t:hover { background: #ff22aa; border-radius: 50px; } HTML 삽입 미리보기할 수 없는 소스 브라우저마다 애니메이션 처리가 안 될 가능성이 있기때문에 적용시켜줌 -moz- : firefox -o- : opera -ms- : explorer -webkit- chrome, sa..
header{width: 960px; margin: 0 auto; border: 1px solid cornflowerblue; } header{width: 960px; height: 150px; #hgroup{position: absolute; left: 5px; top: 10px;} absolute 사용하면 부모태그에서 relative주기! header{position: relative;} li{ float: left;} #menu1 ul{overflow: hidden;} 부모태그에서 overflow hidden 주기! #menu1{position: absolute; right: 0; top: 3px;} #menu1 ul li {border-right:1px solid gray; border-top: ..
#header{ width: 1000px; height: 100px; border: 2px solid gray; margin: 20px auto; } .nyang_img_left{ position: absolute; left: 6px; top: 6px; /* header의 자식에서 벗어나 이미지가 따로 떨어져서 header기준 (6,6)이동하게 됨 */ } position : absolute; 를 지정해주면 공중에 붕뜬 상태에서 브라우저를 기준으로(6,6)지점으로 바뀌게 된다. 이 상태에선 기존 부모였던 header에서 벗어나 body를 부모로 갖게됨(마치 부모가 없어진것처럼) #header{ position: relative; } /* absolute속성을 가진 자식을 내 자식으로 인지하도록 하는 코드..
외부에 따로 css파일을 만들어준다. 자주쓰는 설정을 해두면 편리함! @charset "utf-8"; *{ margin: 0; padding: 0;} /* 기본 마진값과 패딩값을 없애서 디자인을 용이하게 하기 */ a{ text-decoration: none;} /* 링크 밑줄 빼기 */ li{ list-style: none;} /*리스트의 점빼기 */ table{border-collapse: collapse;} /*테이블 칸 한줄로 바꾸기*/ html에 가져와서 head영역에 link를 걸어준다. 외부에 미리 만들어둔 css를 참조하는 개념을 '외부스타일시트'라고 한다.
block 요소를 inline 처럼 나열해서 사용할 때 display inline 대신 더 많이 사용하는 방법 float을 사용한 순간 공중으로 날아오르는 개념 (위에떠있음) 커피와 녹차의 영역만 남는다 자식태그에서 float사용시 부모태그에서 overflow:hidden 해주기!! 하지만 float을 가진 부모(container)는 자식(green,coffe)이 빠져나갔지만 여전히 공간을 유지시켜주기 위해 부모(container)에서는 반드시 overflow : hidden 작업을 해주어야한다. over-flow 내용이 지정된 테두리 영역을 벗어났을때 넘치는 요소를 다루는 속성 overflow visible 기본 설정 값 기본 설정 값 넘치는 내용을 다 표시함 .a5{overflow: visible;}..
구조적 가상 클래스 선택자 pseudo 의사코드 li:nth-child(odd){color: plum;} /*홀수 위치의 태그의 속성을 변경 */ li:nth-child(even){color: cornflowerblue;} /* 짝수 위치의 태그의 속성을 변경 */ li:nth-child(3n){color: gray;} /* 3의 배수 위치의 태그의 속성을 변경 */ li:nth-child(5){color: palegreen;} /* 5번 위치의 태그의 속성을 변경 */
내용이 지정된 테두리 영역을 벗어났을때 넘치는 요소를 다루는 속성 overflow visible 기본 설정 값 기본 설정 값 넘치는 내용을 다 표시함 .a5{overflow: visible;} overflow hidden 넘치면 보이지 않게 내용이 지정된 테두리 영역을 벗어나면 보이지 않게 함 .a2{overflow: hidden;} 자식태그에서 float 을 주었다면 부모태그에선 반드시 overflow hidden을 주어야한다!! float block 요소를 inline 처럼 나열해서 사용할 때 display inline 대신 더 많이 사용하는 방법 float을 사용한 순간 공중으로 날아오르는 개념 (위에떠있음) 커피와 녹차의 영역만 남는다 자식태그에서 float korany0410.tistory.co..
css 선택자란 선택을 통해 특정요소들의 스타일을 적용할 수 있도록 함 선택자의 종류 * { : 전체 선택자 div { : 태그 선택자 .myClass { : 클래스 선택자 #myId { : 아이디 선택자 .myClass ul { : 복합 선택자 h1 + ul { : 인접 형제 선택자 h1 ~ ul { : 일반 형제 선택자 a[href] { : 속성 선택자 a::hover { : 가상클래스 선택자 ( https://korany0410.tistory.com/14 ) h1:nth-child(n) { : 구조적 가상 클래스 선택자 선택자의 우선순위 !important >> id [100] > class [10] > tag [1] > * [0] 점수가 높은 선택자가 우선순위 점수가 같으면 가장 마지막 작성된 선..
margin border를 기준으로 바깥 여백 margin 설정 방법 .box2{ margin: 20px;} /* 상 하 좌 우 */ .box3{ margin: 40px 60px;} /* 상하, 좌우 */ .box4{ margin: 20px 50px 30px; } /* 상, 좌우, 하 */ .box5{ margin: 20px 30px 50px 0;} /* 상, 우, 하, 좌 */ margin의 겹침현상 margin은 padding과 달리 상하여백 큰 값으로 겸침 현상 발생 margin-bottom, margin-top 중 한가지 기준으로 디자인 할 것 좌우는 겸침 현상 없음 부모 자식간의 마진 겹침 현상 margin은 부모 자식 간에도 상하 겹침 현상이 발생한다 부모 요소에 테두리 값이 지정되어있지 않을..
border를 기준으로 내부여백 inline 요소에서 padding 상하패딩 적용 불가 inline형 속성에서 상하 padding이 안쪽 여백으로 생성되지않고 margin처럼 생성되는 문제 발생 inline형 속성에서 padding 사용할 경우 block형 속성으로 바꿔줘야 함 => https://korany0410.tistory.com/8#article-3--inline-%3C=%3E-block-%EB%B3%80%EA%B2%BD
border-style border의 width, color, style을 함께 정의한 구조 (세가지 속성을 모두 갖고있어야함 순서는 달라져도 됨) div은 블록요소로 너비가 줄어들어도 블럭요소를유지한다. 상, 우, 하, 좌 각각의 속성들을 별개로 적용하고싶다면 border:가 아닌 border-width, border-style 등 풀네임을 사용해야한다 .div3{ border-width: 10px 20px 30px 40px; /* 시계방향으로 지정 : 상 우 하 좌 */ border-style: solid; border-color: blue red;} /* 상하 좌우 */ border radius 이미지도 가능! img{ border-radius: 250px;} 이미지 크기값과 라디우스 값이 같으면 ..
