728x90 CSS46 [생활코딩] CSS 수업 정리 (2) px: 고정된 폰트의 크기를 지정할 때 em, rem: 사용자가 페이지의 폰트를 가변적으로 변경할 수 있게 할 때 사용 오늘 날에는 rem을 많이 사용 텍스트의 정렬방법 justify: 왼쪽과 오른쪽의 정렬이 공평하게 화면을 차지하게 된다 font-family: 글꼴을 지정하는 방법 font-weight: 글꼴 두께 line-height: 글자의 행과 행 사이의 간격 띄어쓰기가 되어있는 폰트이름은 큰따옴표로 묶어준다. 장식이 있는 폰트 사용하고 싶을 때 뒤에 serif를 붙여서 사용 line-height 기본값: 1.2 그래서 1.2로 주면 아무런 변화 없음 2로 바꾸면 더 .. 2023. 6. 14. [생활코딩] CSS 수업 정리 (1) HTML - 정보 CSS - 디자인 HTML - 정보에 전념 태그: css 문법에 따라 해석해서 동작 style 은 HTML 의 문법 : html의 문법 中 속성 상단의 STYLE 태그도 HTML 문법 CSS가 온다는 것을 HTML의 문법으로 브라우저에게 알려주는 것 color:red 이 부분이 CSS의 문법 class: 어떠한 대상을 관리하기 쉽도록 그룹핑 하는 것 같은 태그 뿐만 아니라 서로 다른 태그도 그룹핑 가능 id: 한명 한명 관리 딱 한 번만 등장 ul 밑에 있는 li 선택 : 띄어쓰기 사용 > : 직계자손에게만 스타일 적용 수도클래스: 각각의 엘리먼트의 상태에 따라서 선택자가 선택되.. 2023. 6. 9. [ 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. 이전 1 ··· 4 5 6 7 8 다음 728x90
