솧이 블로그

[font] font-family, font-size, font-style, font-weight * { rgba (0,0,255,0.5); } /*네번째 숫자는 불투명도*/ text-align : start, end, left, right, center, justify, match-parent line-height : 줄 간격을 조절 텍스트를 세로로 가운데 정렬하기 - height : 100px; line-height : 100px 두 개의 속성값을 똑같이 추가 text-decoration : 텍스트의 줄을 표시하거나 없애줌 (none, underline, overline, line through) text-shadow : 텍스트에 그림자 효과 (가로 거리*, 세로 거리*, 번짐 정도, 색상) text..

Q. height: auto를 준 상태에서 position: relative를 하면 높이가 날라간다? 자식요소가 absolute를 가지면 float 처럼 공중에 떠서 좌표로 붙는 것이기 때문에 부모요소가 자식요소가 없다고 생각해서 높이 값이 없어집니다. 부모요소의 높이 값은 height: auto인 상태라서 그렇습니다. * 속성값 auto에 대해서 알아보자 부모 요소가 height: auto 이면, 자식 요소는 top: %는 사용 할 수 없다 부모 요소의 크기를 기준으로 %를 계산하는데 부모의 크기가 auto로 설정되어 있다면 계산에 문제가 생긴다. 상대값인 %가 아니라 절대값 px로 설정한다면 부모의 크기에 상관없이 움직일 수 있기에 정상적으로 작동한다 해결! 뭐지.. HTML 태그는 사용자 인터페이스..

.sidebar .active { background-color: green; color: white; } /*sidebar 중에서 active에만 마우스가 반응하지 않게 한다*/ .sidebar a:hover:not(.active) { background-color: #555; color: white; }

image -전체 이미지가 화질이 깨지지 않게 나온다 width속성이 백분율로 설정되고 속성 height이 "자동"으로 설정되면 이미지가 반응하고 확대 및 축소된다? .img { width: 80%; /*가로 길이는 컨테이너의 80% 유지. 아무리 확대, 축소해도 변함없음*/ height: auto; } -80%에서 더이상 커지지 않는다 .img { max-width: 800%; height: auto; } -maximum 사이즈 이내로 국한 시키는 경우: 확대, 축소 가능 .img { width: 100%; height: auto; max-width: 400px; } background-image -잘리지 않고 이미지가 전부 보인다. 빈 공간 발생 가능 background-size: contain -전..

@media 에서 max-width : ~ : ~ 보다 작은 경우 min-width : ~ : ~보다 큰 경우 @ 는 스크린 구문이다 @media only screen and (max-width: 600px) { /* 가로 길이가 600 이하일 때(확대할 때) 실행되는 구문이다*/ } @media only screen and (min-width: 600px) { /*600q보다 커지면 적용*/ } -종횡비에 따른 적용 @media only screen and (orientation: landscape) { /*가로가 더 긴 경우*/ h2::after { content: " : landscape"; } @media only screen and (orientation: portrait) { /*세로가 더 긴..

flex | grid flex : 한방향 레이아웃 grid : 두방향 레이아웃 -col로 시작하는 element에 적용 [class*="col-"] { float: left; } .col-1 {width: 8.33%;} /*한칸짜리 폭*/ .col-2 {width: 16.66%;} /*두칸짜리 폭*/ .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%..

viewport viewport meta 태그를 지정하지 않으면 모바일 상태에서 가로 스크롤이 발생한다 페이지 내용을 보기 위해 확대를 하게 하는건 사용자에게 불편함을 준다 viewport는 웹페이지에서 사용자에게 보여지는 영역이다 이게 적용되면 디바이스의 크기에 맞혀져 가로 스크롤이 생기지 않는다 * 향후 모든 웹페이지에 이 옵션이 들어가게 하자. 그러면 현재 보여지는 디바이스 폭에 100퍼센트 맞춰진다

반응형 웹 모든 종류의 기기마다 최적화된 레이아웃을 제공한다 HTML & CSS 만으로 구현된다 제작 단계 1. viewport 설정 2. grid 설정 3. box-sizing 설정 box-sizing 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다 content-box: 콘텐츠 영역을 기준으로 크기를 정한다 border-box: 테두리를 기준으로 크기를 정한다 initial: 기본값으로 설정 inherit: 부모 요소의 속성값을 상속 받는다 * 반응형 웹으로 만들 때 꼭 사용해야 한다 box-sizing: border-box; 를 지정하지 않으면 컨테이너의 크기를 초과하여 box2가 box1 아래로 간다

animation 수치화된 것들은 전부 애니메이션화가 된다 -마우스를 갖다대면 천천히 커진다 transition: width 2s, height 2s; -transition: all 2s; (transform, width, height, background-color) transform 관련 값 : translate(), rotate(), scale(), skewX(), skewY(), matrix() -왼쪽에 100px 공백, 오른쪽으로 이동 !!!적용!!! http://127.0.0.1:5500/03_CSS/Css012_Animation2.html

selector selector란 어느 element에 스타일을 적용할지를 지정한다 selector 중에서 combination 이라고 불리는 것 descendant selector (space) : 자손 child selector (>) : 자식 adjacent sibling selector (+) : 다음에 등장하는 인접 형제 general sibling selector (~) : 다음에 등장하는 모든 형제 * { } *=div { } *=p { } , { } #para { } span#para{ } .c1{ } span.c1 { } -div의 자손들 중에 모든 p div p { } -div의 바로 자식인 모든 p div > p{ } -div 끝나고 바로 다음 인접 형제 p, 동생들 중 바로 다음 p..