본문 바로가기

HTML + CSS

(25)
[HTML + CSS] display의 종류 1. inline 2. block 3. inline-block 4. flex 5. list-item 6. none 1. inline : ① 앞, 뒤 텍스트와 같은 줄에 머물고(줄바꿈을 하지 않고), 가로 길이는 필요한 만큼만 차지 ② width, height 값을 설정할 수 없다. (※ img 제외) (width=auto, height=auto) ... 등 2. block : ① 단독의 줄을 차지. 최대한 많은 가로 길이를 가지려 함 ② width, height 값을 가지지만, 그 줄 안에는 다른 요소가 올 수 없다. , , , , , ... 등 3. inline-block: ① inline 요소처럼 같은 줄에 머무름 ② block 요소처럼 width, height 값을 가짐 4. display 바꾸기 ..
CSS 단위 1. font-size px : 절대값 rem : 태그의 font-size에만 영향을 받음 em : 자기 자신의 font-size 의 2배. 자기 사진의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 함 % : 상위 요소의 font-size의 몇 % 2. padding, margin px % : 상위 요소의 width 값의 몇 % div { width: 900px; height: 700px; margin-top: 10%; } ∴ margin-top 값은 90px
[HTML + CSS] CSS 우선 순위 CSS 우선 순위 1. !important 2. inline으로 style 지정 3. ID 4. class, pseudo-class 5. 선택자가 태그이름 6. 상위 객체의 상속된 속성 ※ 우선 순위가 같은 우선 순위의 경우 CSS가 나중에 선언한 것인 우선 적용 1. !important .class { background-color: red !important; } 2. inline 으로 style 지정 inline으로 지정한 경우 3. ID #ID { background-color: red; } 4. class, pseudo-class .class { background-color: red; } 5. 선택자 태그 이름 div a { background-color: red; } 6. 상위객체의 상속된 ..
[HTML + CSS] CSS 상속(inherit) color font-family font-size font-weight line-height list-style text-align visibility but, 태그에는 color 속성 상속되지 않음 그래서, inherit(상속받다, 물려받다) 값을 쓰면 됨 a { color: inherit; }
[HTML + CSS] CSS 선택자(selector) selector { border: 1px solid blue; } 1. TAG(태그) h1, p, div... 2. ID #id /*id 앞에 '#' 표시*/ 3. CLASS .class명 /*class명 앞에 '.' 표시*/ 4. 자식(Children) #header p /*id header 자식중 p 태그*/ 5. 직속자식(Direct children) .parent > .chlildren /* parent 클래스 바로 밑의 chlidren 클래스*/ 6. 여러 선택자 함께 선택 .one, .two /*쉼표(,)로 추가*/ 7. class 교집합 .blue.circle /*칸을 띄우지 않음. blue 클래스와 circle 클래스를 모두 가지고 있는 요소*/
background-image background-image .background { background-image: url("../images/picture.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; } background-image url로 표시 background-repeat repeat; /*가로, 세로 반복. 기본*/ no-repeat; /*반복하지 않음*/ repeat-x; /*가로 반복*/ repeat-y; /*세로 반복*/ 기타 /*별로 안 나올 것 같아서 생략*/ background-size auto; /*원래 사이즈*/ cover; /*화면을 꽉 채우면서, 사진 비율을 유지*/ conta..
[HTML + CSS] box-sizing box-sizing 1. 기본값(content-box) : width와 height 값은 content-box의 크기를 나타낸다. 그러므로, padding 과 border 값을 넣어주면 그만큼 커진다. box-sizing: content-box; 2. border-box : width값과 height값은 padding과 border 값을 포함한다. box- sizing: border-box; 3. * { box-sizing: border-box; }
[HTML + CSS] box-shaow(그림자 효과) 1. 기본형(필수) box-shadow: 10px 15px #000; 10px : x-position. 양수면 오른쪽, 음수면 왼쪽. 필수15px : y-position. 양수면 아래쪽, 음수면 위쪽. 필수#000 : 그림자색. 안쓰면 까만색이 기본값이라 그러는데, 나는 값을 안 넣으니까 그림자가 안 나타남. 필수인듯... blur나 spread를 주지 않은 기본형에서는 그림자의 크기가 box의 크기 같음. 그러므로, 'box-shadow: 0 0 #000;' 과 같이 입력하면 그림자가 box의 바로 아래에 있으므로 보이지 않는다. 2. 확장형 box-shadow: 10px 15px 12px 14px #000; 12px : blur. 흐릿한 정도를 나타낸다. 값이 클수록 흐려지고, blur범위도 넓어진다..