티스토리

korany

검색하기

블로그 홈

korany

korany0410.tistory.com/m

korany 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[css] 서브 메뉴 만들기 처음으로 여행안내 소개합니다 오시는 길 이용방법 객실요금 요금안내 예약하기 예약확인 게시판 공지사항 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에 마우스를 올.. 공감수 0 댓글수 0 2023. 2. 27.
[css] transition 애니메이션 .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.. 공감수 0 댓글수 0 2023. 2. 24.
[css] position float 사용예제 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: .. 공감수 0 댓글수 0 2023. 2. 24.
[css] position layout #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속성을 가진 자식을 내 자식으로 인지하도록 하는 코드.. 공감수 0 댓글수 0 2023. 2. 23.
[css] 외부스타일시트 외부에 따로 css파일을 만들어준다. 자주쓰는 설정을 해두면 편리함! @charset "utf-8"; *{ margin: 0; padding: 0;} /* 기본 마진값과 패딩값을 없애서 디자인을 용이하게 하기 */ a{ text-decoration: none;} /* 링크 밑줄 빼기 */ li{ list-style: none;} /*리스트의 점빼기 */ table{border-collapse: collapse;} /*테이블 칸 한줄로 바꾸기*/ html에 가져와서 head영역에 link를 걸어준다. 외부에 미리 만들어둔 css를 참조하는 개념을 '외부스타일시트'라고 한다. 공감수 0 댓글수 0 2023. 2. 23.
[css] float block 요소를 inline 처럼 나열해서 사용할 때 display inline 대신 더 많이 사용하는 방법 float을 사용한 순간 공중으로 날아오르는 개념 (위에떠있음) 커피와 녹차의 영역만 남는다 자식태그에서 float사용시 부모태그에서 overflow:hidden 해주기!! 하지만 float을 가진 부모(container)는 자식(green,coffe)이 빠져나갔지만 여전히 공간을 유지시켜주기 위해 부모(container)에서는 반드시 overflow : hidden 작업을 해주어야한다. over-flow 내용이 지정된 테두리 영역을 벗어났을때 넘치는 요소를 다루는 속성 overflow visible 기본 설정 값 기본 설정 값 넘치는 내용을 다 표시함 .a5{overflow: visible;}.. 공감수 0 댓글수 0 2023. 2. 23.
[css] nth:child 선택자 구조적 가상 클래스 선택자 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번 위치의 태그의 속성을 변경 */ 공감수 0 댓글수 0 2023. 2. 23.
[css] over-flow 내용이 지정된 테두리 영역을 벗어났을때 넘치는 요소를 다루는 속성 overflow visible 기본 설정 값 기본 설정 값 넘치는 내용을 다 표시함 .a5{overflow: visible;} overflow hidden 넘치면 보이지 않게 내용이 지정된 테두리 영역을 벗어나면 보이지 않게 함 .a2{overflow: hidden;} 자식태그에서 float 을 주었다면 부모태그에선 반드시 overflow hidden을 주어야한다!! float block 요소를 inline 처럼 나열해서 사용할 때 display inline 대신 더 많이 사용하는 방법 float을 사용한 순간 공중으로 날아오르는 개념 (위에떠있음) 커피와 녹차의 영역만 남는다 자식태그에서 float korany0410.tistory.co.. 공감수 0 댓글수 0 2023. 2. 23.
[css] Selector (선택자) 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] 점수가 높은 선택자가 우선순위 점수가 같으면 가장 마지막 작성된 선.. 공감수 0 댓글수 0 2023. 2. 22.
[css] margin 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은 부모 자식 간에도 상하 겹침 현상이 발생한다 부모 요소에 테두리 값이 지정되어있지 않을.. 공감수 0 댓글수 0 2023. 2. 22.
[css] padding 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 공감수 0 댓글수 0 2023. 2. 22.
[HTML] border 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;} 이미지 크기값과 라디우스 값이 같으면 .. 공감수 0 댓글수 0 2023. 2. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.