Today I Learned/CSS16 [CSS] CSS 속성 3 - 에이블런 프론트엔드부트캠프 3일차 1. filter filter를 이용해 화면의 명도, 채도, 밝기 등을 변경할 수 있다.속성명속성값설명filterblur요소의 흐림 효과를 조절brightness요소의 밝기를 조절contrast요소의 명도 대비 조절grayscale요소의 흑백 조절hue-rotate요소의 색상 단계 조절invert요소의 색상 반전 단계를 조절saturate요소의 채도를 조절sepia요소의 갈색 톤 단계 조절/* 값이 커질수록 효과 커짐 */section article:nth-of-type(1) { filter: blur(10px);}/* 1보다 작아지면 어두워짐 */section article:nth-of-type(2) { filter: brightness(2);}/* 100보다 작아지면 명암대비효과 감소.. 2024. 7. 17. [CSS] CSS 속성 2 - 에이블런 프론트엔드 부트캠프 2일차 1. float float 속성은 block 속성값을 가진 요소를 가로로 배치되도록 만들 수 있는 속성이다. 속성명속성값설명floatleft요소를 왼쪽에 배치right요소를 오른쪽에 배치 float를 적용하지 않은 block 속성의 두 사각형은 위와 같이 출력된다. 하지만 float를 넣는다면 아래와 같이 두 사각형이 가로로 나란히 출력되는 것을 볼 수 있다. section { width: 1000px; margin: 50px auto; border: 10px solid black; box-sizing: content-box;}section article { width: 500px; height: 500px; float: left;}article:nth-of-type.. 2024. 7. 16. [CSS] CSS 속성 - 에이블런 프론트엔드부트캠프 1일차 1. 크기 지정크기 지정은 width(가로)와 height(세로)를 사용한다. 단위는 다음과 같이 사용할 수 있다. 속성명속성값설명width, heightpx너빗값과 높잇값을 px 단위로 지정%부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 지정vw브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 지정vh브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 지정 2. margin & paddingmargin(바깥쪽 여백)과 padding(안쪽 여백)을 통해서 HTML에 여백을 줄 수 있다. margin과 padding 모두 크기 지정 속성과 단위가 동일하며 margin을 활용해 가로 기준 가운데 배치를 할 수 있다. /* 레이어를 화면 중앙에 옮김 */ margin: 0px auto; 3. bo.. 2024. 7. 15. [CSS] CSS 선택자 - 에이블런 프론트엔드부트캠프 1일차 CSS에는 HTML의 태그들에게 개별적으로 스타일을 적용시키기 위해 다양한 선택자들이 존재한다. 이들을 여러가지 조건에 맞춰 다양하게 사용함으로써 화면을 다채롭고 아름답게 변화시켜준다. 오늘은 스타일을 지정하기 위한 선택자들을 공부했다. 1. 전체 선택자전체선택자로 사용되는 ' * ' 은 모든 HTML 요소를 한 번에 선택한다. 전체선택자 * 는 아래와 같이 사용할 수 있다./* 전체 선택자 */ * { border: 1px solid lightblue;} 2. 태그 선택자태그 선택자는 태그명을 이용하여 HTML 요소를 선택할 수 있다. 태그 선택자는 아래와 같이 사용할 수 있다/* 태그 선택자 */ h1 { border: 1px solid red;} 3. 자손 선택자자손 선택자는 앞에.. 2024. 7. 15. 이전 1 2 3 다음
