728x90 반응형 나도코딩css8 [ 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. [ HTML + CSS + 자바스크립트] 5.3 ~ 5.5 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 5.3 ) 가상 요소 선택자 사용하기 : 명시적으로 작성된 구성요소는 아니지만 존재하는 것처럼 취급해 선택하는 선택자 지정방법 :: 기호(콜론2개)를 붙여서 사용하고, 기준 선택자와 함께 사용. - before 선택자- : 기준선택자 요소 앞의 공간을선택 - after 선택자- : 기준선택자 요소 뒤의 공간을 선택 - content 속성 - : before 선택자와 after 선택자에서만 사용하는 속성 : 새로운 콘텐츠 만들거나 추가할 때 사용한다 - 가상 요소 선택자 활용 예시 - : p (기준선택자)를 기준으로 앞(before), 뒤(after)에 요소가 있는 것 처럼 선택, 그리고 content 속성을 통해 텍스트를 추가했다.. 2023. 3. 25. [ HTML + CSS + 자바스크립트] 4.1 ~ 5.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 4.1 ) CSS 문법 살펴보기 h1{color:red;} 선택자와 선언부 color - 속성 red - 값 ; (세미콜론) - 넣으면 연속해서 스타일 작성 가능 4.2 ) CSS 적용하기 - CSS 적용 방법 (3) - 1. 내부 스타일 시트 html 문서에 태그 사용 2. 외부 스타일 시트 새로운 css 파일 생성 (확장자 .css) html 파일에 css 파일 연결 (link 태그 사용) html 파일과 css 파일 연결된 상태 확인 3. 인라인 스타일 사용 : html 문서에 있는 태그에 직접 CSS 코드 작성하는 방법 선택자 부분 필요없음 5.1 ) 기본 선택자 사용하기 : 모든 요소 선택 p 태그 지정하면.. 2023. 3. 21. 이전 1 다음 728x90 반응형
