no image
[CSS] Day5
1. CSS 2D 2차원 좌표에서 요소를 변형시키는 속성 - translate: 이동 - rotate: 회줜 - scale: 확대, 축소 - skew: 경사, 비틀기 벤더 프리픽스 (Vender Prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사 - W3C css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임 -webkit- : 크롬, 엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz- : 파이어폭스를 위한 접두사 - 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문..
2023.10.17
no image
[CSS] Day4
1. Flex 레이아웃 - 수평정렬을 하기 위한 속성 display: flex flex-wrap flex-wrap : 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap : 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 wrap : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김) flex-direction flex-direction : 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 row : 기본값. 가로로 배치되는 row-reverse : 가로로 배치(반대로) column : 세로로 배치 column-reverse : 세로로 ..
2023.10.17
no image
[CSS] Day3
1. CSS 디스플레이 css 디스플레이 - 웹 페이지의 레이아웃을 결정하는 속성(display) (block, inline, inline-block, none) ✓ visibility: hidden; visibility: visible; 2. CSS 폼 및 Postition css 폼 - tcp school, w3schools, mdn 참고 css Position - 요소의 위치를 결정하는 방식을 설정 3. 정적 위치 지정방식 - static position(기본값) - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 - 요소끼리 절대로 겹치지 않는다. 4. 상대 위치 지정방식 - relative position - HTML 요소..
2023.10.11
no image
[CSS] Day2
1. CSS Fonts text-decoration : 텍스트의 효과를 설정하거나 제거하는데 사용 (none, underline, line-through, over-line) font-variant : 소문자를 작은 대문자로 변경(small-caps) text-shadow : 텍스트에 그림자 효과를 설정 text-shadow : 가로길이 세로길이 번짐정도 색상; white_space : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성 (nowrap, pre, pre-wrap, pre-line) text-overflow : 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성 (clip, ellipsis) overflow : 요소내의 컨텐츠가 너무 커서 모두 보여..
2023.10.11
no image
[CSS] Day1-1
1. 인라인 스타일 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 2. 내부 스타일 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 3. 외부 스타일 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 4. 전체 선택자 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 5. 요소 선택자 요소 선택자 특정 요소가 쓰인 모든 요소의 스타일을 적용 span 요소 span 요소 span 요소 6. 상속 상속 div 영역 상속이란 부모 요소의 속성값이 자식 요소에게 전달되는 것 7. ID 선택자 id 선택자 div 첫번째 영역 div 두번째 영역 8. class..
2023.10.10
no image
[CSS] Day1
CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 ✓ rel 현재 문서와 링크된 문서 사이의 연관관계를 명시 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용 - * 기호를 사용해서 표현 - 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 * { 속성명1: 속성값; 속성명2: 속성값; ...} ✓ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선! 2. 요소 선택자 - 특정 요소가 쓰인 모든 요소의 스타..
2023.10.10