요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요소인 경우에 스타일을 적용한다. 3. nth-child(n) 해당 요소가 부모 요소의 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. 4. :nth-last-child(n) 해당 요소가 부모 요소의 뒤에서부터 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. n으로 사용할 수 있는 항목 1. 숫자 : index(위치) 2. 수열 : 2n, 3n, ,, 2n+13..
🔻태그의 수평 정렬🔻 인라인 태그와 블럭 태그의 방법이 상이하다. 1. 내용물의 정렬 text-align 인라인 태그는 좌우 여백이 없어서 적용이 불가능하다. 블럭 태그 전용이다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 2. 태그 자체의 위치를 정렬 인라인 태그 부모님 블럭 태그 도움을 받는다.(ex. ) 블럭 태그 좌우 여백 공간이 없어서불가능하다. 마진을 조절하여 정렬한다. 인라인 태그 조절 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 블럭태그 조절
🔻position🔻 1. padding : 부모가 자식의 위치를 지정한다. 2. margin : 스스로 위치 지정한다. 3. position : CSS1 ~ CSS3에서 자주 사용 4. transform : CSS4에서 자주 사용 좌표값을 사용하여 위치를 지정한다. x(left), y(top) 좌표를 지정하는 방식이 여러개이며, 원점(기준점)이 다양하다. 🔻속성🔻 1. static position: static 요소의 기본값이며, 일반적인 문서 흐름에 따라 배치된다. x,y 사용 불가능하다. FlowLayout 2. absolute position: absolute 절대 좌표 top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다. 문서의 좌측 상단을 원점으로 한..
user agent stylesheet 브라우저마다 css를 다르게 적용한다. > 모든 브라우저에서 동일되게 보이도록 통제한다. 🔻CSS 초기화작업🔻 브라우저 설정을 막는다. 1. Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in..
🔻float🔻 기존의 출력 정책을 깨고, 자신의 위치에서 벗어나 현재 라인의 좌측(우측) 끝으로 이동한다. float: left; 또는 float: right;를 사용하여 요소를 왼쪽이나 오른쪽으로 이동한다. 이동 시, 라인의 윗쪽으로 붙는다. 인삿말 중부지방과 전북, 경북권은 오후까지, 강원 남부와 충북, 경북 북부는 밤까지 비가 이어지겠다. 26일부터 이틀간 예상 강수량은 수도권(서해5도 제외)·충청권 5∼30㎜, 강원영동·경북북부 동해안 20∼70㎜, 강원영서·대구·경북(북부 동해안 제외), 울릉도·독도 5∼40㎜, 전북·서해5도 5∼20㎜다. 광주·전남 5㎜ 미만, 부산·울산·경남은 5㎜ 안팎, 제주도는 5∼10㎜의 비가 26일 하루 동안 내릴 것으로 예보됐다. 아침 최저기온은 18∼22도, 낮 ..
🔻DISPLAY🔻 가장 많은 속성을 가지고 있다. 요소의 출력 방식을 제어하는 역할이다. 기본값이 상황에 따라 달라진다. 블럭 태그 일 때 기본값 : block 인라인 태그 일 때 기본 값 : inline block (블록) display: block; 블록 레벨 요소로 만든다. 요소가 가로 전체 영역을 차지하며, 새로운 줄에서 시작한단. width, height와 같은 속성을 설정할 수 있습니다. inline (인라인) display: inline; 인라인 요소로 만든다. 요소가 콘텐츠의 흐름 중간에 들어가며, 너비와 높이를 가지지 않는다. width와 height 속성이 적용되지 않습니다. inline-block (인라인 블록) display: inline-block; 인라인 블록 요소로 만듭니다. ..
🔻overflow🔻 요소의 내용이 요소의 상자 크기를 벗어날 때 어떻게 처리할지를 지정한다. visible: 요소의 내용이 상자 밖으로 나가도 가려지지 않고 보이게 한다. (기본값) hidden: 요소의 내용이 상자 밖으로 나가면 잘려서 보이지 않게 한다. scroll: 요소의 내용이 상자 밖으로 나가면 스크롤바가 나타나게 하여 스크롤해서 볼 수 있게 한다. auto: 내용이 상자 밖으로 나가면 스크롤바가 필요한 경우에만 나타나게 한다. inherit: 부모 요소의 속성값을 상속한다. ▶scroll ▶auto 상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자..
🔻박스 모델, Box Model🔻 모든 태그는 화면에 출력될 때(렌더링 될때) 사각형으로 출력된다. 태그가 화면에 출력될 때 공통된 성질에 관련된 정책이다. 속성 : border, width, height, padding, margin 1. border 테두리 모든 태그는 자신의 영역을 가진다. 영역을 기준으로 테두리를 가진다. 영역은 반드시 사각형이다. 공통된 접두어를 가진 속성들은 하나로 표현이 가능하다. 이렇게 표현한 것을 '속성그룹' 이라고 한다. 입력 필드에 포커스가 맞춰졌을 때 강조테두리가 부담스럽다면 아래처럼 outline을 none으로 설정하면 해제된다. outline: none; 2. width / height 블럭태그 크기와 인라인태그 기본 크기 정책이 다르다. 블럭태그의 기본 크기 정..
제네릭 폰트(Generic font) 특정한 폰트명을 지정하지 않고 일반적인 폰트 카테고리를 지정하는 CSS 속성이다. 웹 페이지가 특정 폰트를 사용할 수 없는 경우에 대비하여 대체 폰트를 지정하는 데 사용된다. '폰트 예약어'라고도 한다. 제네릭 폰트 카테고리 : serif , sans-serif , monospace , cursive , fantasy 1) serif(세리프): 획끝에 장식이 있는 폰트(궁서체, 바탕체) 2) sans-serif(산세리프) : 획끝에 장식이 없는 폰트(돋움체, 고딕체) 3) monospace(고정폭) : 문자폭이 균일한 폰트(궁서체) 4) cursive(손글씨) : 장식체 5) fantasy(판타지) : 장식체 적용 예시 font-family: 궁서체, 바탕체, mon..
1. 구글 폰트 https://fonts.google.com/?subset=korean¬o.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 왼쪽 Languge 탭에서 적용가능한 언어로 조회할 수 있다. 적용할 글꼴을 선택한 후 해당 글꼴의 굵기를 선택한다. 오른쪽 import 버튼을 클릭 후 아래의 코드를 복사하여 html 파일에 붙여넣는다. 2. 눈누 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 적용할 글꼴을 선택한다. 선택한 글꼴 창의 오른쪽 '웹폰트로 사용' 코드 부분을 복사한다. ..
