728x90 나도코딩25 [ HTML + CSS + 자바스크립트] 7.1 ~ 7.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 7.1) 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 : 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 - 플렉스 박스 레이아웃 기본 속성 - DOCTYPE html> Document .container { color: rgb(63, 61, 56); background-color: aquamarine; padding: 1rem; display: flex; } .box { background-color: rgb(238, 141, 14); } .box:nth-child(2n) { background-color: blueviolet; } A B C : flex 또는 inl.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.7 ~ 6.9 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.7 ) 애니메이션 속성으로 전환 효과 제어하기 DOCTYPE html> 애니메이션 속성으로 전환효과 제어하기 .box { width: 100px; height: 100px; background-color: red; animation-name: beChange; animation-duration: 2s; } @keyframes beChange { 0% { background-color: aqua; } 100% { background-color: beige; } } 애니메이션 속성: 전환효과 속성과 달리 키프레임을 정의해서 실행 : 특정 요소 적용할 키 프레임 이름 지정 .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.5 ~ 6.6 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.5) 위치 속성으로 HTML 요소 배치하기 : 좌푯값에 따라 배치할 때 사용 Document body { height: 5000px; } .box { width: 100px; height: 100px; } .red { background-color: red; float: left; } .green { background-color: green; float: left; } .blue { background-color: blue; float: left; } - position 예시들 - - absolute 와 relative 기준점 차이 - absolute: 웹 브라우저의 왼쪽 위 모서리 relative: 요소의 왼쪽 위 모서.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.3 ~ 6.4 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.3) 박스 모델을 구성하는 속성 다루기 - margin -border -padding -content 속성값 (4) margin-top margin-right margin-bottom margin-left 순으로 값을 의미함 - margin 적용 예시 - : margin과 달리 여러 속성값이 복합적으로 사용 p { border-width:2px; } - border-width 속성 - : 테두리 굵기 p { border-width:2px; border-style:dotted; } h1 { border-style; } h2 { line-height: 16px; } h3 { line-height: .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.2 ) 텍스트 속성으로 텍스트 꾸미기 1. font - family : 글꼴 지정 : 쉼표로 구분 : 한글 또는 공백있는 글꼴명은 큰따옴표로 감싸야 함 2. font - size : 일반적인 텍스트 크기 = 16px 3. 숫자표기법 (font-weight) : 100 - 최소 굵기 900 - 최대 굵기 4. 키워드표기법 (font-weight) 5. font-style 6. font-variant : 텍스트를 크기가 작은 대문자로 변환 7. text-align : 텍스트를 정렬 8. text-decoration : 텍스트에 선 긋기 : a 태그와 같이 사용 가능 9. letter-spacing : 글자 사이 간격 조절 10. lin.. 2023. 4. 1. [ HTML + CSS + 자바스크립트] 6.1 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.1) CSS의 특징 살펴보기 HTML 태그 : 태그 자체에 꾸밈을 담당하는 역할이나 기능X 하지만, 기본스타일시트가 내장 되어있으면 꾸며진 것처럼 보일 수 O (ex: hn태그) 스타일 적용은 웹브라우저에 내장된 기본스타일시트 스타일보다 사용자가 지정한 스타일 속성이 우선 적용된다 그리고 단계적 적용이 된다 = 같은 태그에 스타일 여러개가 있으면 결국 마지막에 적힌 스타일만 적용 결론: 마지막에 작성된 스타일 >사용자 정의 스타일 > 기본 스타일 시트 : 같은 태그에 중복해서 스타일이 지정될 때 사용 : 선택자를 분류해서 개수를 세고 점수를 곱해 합을 구해서 우선순위를 판단한다 선택자의 개별성 점수가 똑같을 땐 나중에 작성된.. 2023. 3. 26. 이전 1 2 3 4 5 다음 728x90
