JAVAIARY

다른 팀원이 짠 헤더와 내가 짠 바디를 합칠 때 문제가 발생했다. *{ box-sizing: border-box } - box-sizing의 속성값 - content-box : 콘텐츠 박스 기준 요소의 크기(너비/높이)를 100px로 설정하면 콘텐츠 박스의 크기가 100px이 되고, 패딩/테두리를 더하면 100px을 초과하는 값을 가지게 됨 - border-box : 테두리 기준 요소의 크기(너비/높이)를 100px로 설정하면 테두리까지 포함해서 100px이 되도록 맞춰줌 콘텐츠가 테두리 안에서 삐져나가는 것을 원치 않을 때 주로 사용

1. list-style-type list-style-type : 불릿스타일 ; - 불릿모양/번호 스타일을 지정 종류 설명 disc ● 채운 원 모양 circle ○ 빈 원 모양 square ■ 채운 사각형 모양 decimal 1,2,3... 1 부터 시작하는 10진수 decimal-leading-zero 01,02... 앞에 0이 붙는 10진수 lower-roman i, ii, iii 로마숫자 소문자 upper-roman I, II, III 로마숫자 대문자 lower-alpha lower-latin a, b, c 알파벳 소문자 upper-alpha upper-latin A, B, C 알파벳 대문자 none 목록 표시 기호를 넣지 않음 2. list-style-image list-style-image: ..

목록 스타일 1. list-style-type list-style-type : 불릿스타일 ; - 불릿모양/번호 스타일을 지정 2. list-style-image list-style-image: | none - 기본 불릿 대신 이미지 파일 사용도 가능 3. list-style-position list-style-position : inside | outside - 들여쓰기 4. list-style list-style - 목록 속성을 한꺼번에 표시 표 스타일 1. caption-side caption-side : top | bottom - 표 제목의 위치 지정 2. border table{ border: 1px solid black } td, th{ border: 1px dotted border } - 표의..

1. font-family 속성 font-fmaily : | [, ] body{font-family : "맑은 고딕", 돋움, 굴림} - body전체에 맑은 고딕 글꼴을 적용함. 맑은 고딕 글꼴이 없을 시 돋움, 돋움이 없을 시 굴림 적용 2. font-size 속성 font-size : | | | - xx-small

1. 전체 선택자 - * {속성 : 값; ....} - 스타일을 문서의 모든 요소에 적용할 때 사용 2. 타입 선택자 - 태그명 {스타일 규칙} - 해당 태그 요소에 적용할 때 사용 3. 클래스 선택자 - .클래스명 {스타일규칙} - 문서의 일부에 적용하고 싶을 떄 사용 - 적용하고자 하는 태그 안에 class="클래스명" 속성을 지정하여 사용 - ex) .blue { color : blue} .accent {border : 1px solid #000} 이름 : * 2개 이상 적용할 때는 공백으로 구분 4. ID 선택자 - #아이디명 {스타일 규칙} - 문서에서 딱 한 번만 적용 가능(중복사용 불가) - 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를..

외부스타일시트 선택자를 이용해 작성해 놓은 스타일 시트를 .css파일로 저장하여 원하는 html문서에 불러와서 적용할 수 있는 기능 장점 - 내용과 스타일을 분리하여 데이터 관리가 쉬워짐 - 동일한 스타일을 여러 페이지에 적용할 때 유용 h1 { color : navy; font-size : 3.5em; font-style: oblique; } h1: 선택자 color: 속성 navy: 속성값 .css 파일에 저장한 내용 외부스타일시트 적용하기

내부스타일시트 body 태그 보다 먼저 와야 웹문서를 읽기 전에 미리 스타일 정보를 읽어들이고 적용하여 출력함 내부 스타일시트 만들기(제목) 마젠타 제목 1 단락 111111111111111111111 2 단락 222222222222222222222 3 단락 333333333333333333333 See the Pen Untitled by Javaiary (@javaiary) on CodePen.