1.1 배경색과 배경범위 지정 background-color background-clip : border-box padding-box content-box 1.2 배경 이미지 지정 background: url() background-image: url("이미지파일경로") background-repeat : repeat-x repeat-y no-repeat background-position: ; 수평 위치 : left | center | right | 길이값 | % 수직 위치 : top | center | right | 길이값 | % background-origin : border-box padding-box content-box background-attachment : scroll | fixed ba..
CSS와 box model box-sizing : 박스 모델의 크기를 계산 border-box : 테두리까지 포함해서 너빗값 ( 총 너비 = width+2(margin+padding+border) ) content-box : 콘텐츠 영역만 너비값을 지정 (default) box-shadow : 박스 모델에 그림자 효과 box-shadow : inset 테두리 스타일 border: border-style : solid | dotted | dashed | double border-width : | thin | medium | thick border-color border-radius : 둥근 테두리 50% 👉 원 형태의 이미지 생성 여백을 조절하는 속성 margin 웹 문서를 가운데 정렬하기 👉 margin..
1. 글꼴 관련 스타일 font-size - px | rem | em | % font-style - normal | italic | oblique font-weight - normal | bold | bolder | Lighter font-family : 웹 문서에 사용할 글꼴 지정 body{ font-family: "맑은 고딕", 돋음, 굴림 /* 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶는다 */ } 1.2 웹 폰트 사용 @font-face { font-family: cheri; src: url(../fonts/cheri.ttf); } .font-md{ font-family: cheri, '글꼴이름', serif; font-size: 40px; } 1.3 텍스트 관련 스타일 color text-..
🎈참고. CSS 선택자 1.1 기본 선택자 * tag명 .클래스명 #id명 tag1, tag2 [속성명] tag명[속성명] [속성명=값] [속성명~=값] [속성명:=값] [속성명^=값] [속성명$=값] tag > tag2 tag tag2 tag + tag2 tag ~ tag2 1.2 가상 클래스(Pseudo class) 선택자 :focus :first-child :last-child :only-child :nth-child(n) :not(선택자) :enable :disable :checked :empty :link : 방문하지 않은 링크 :visited : 방문한 링크 :hover : 지정된 요소에 마우스가 올라간 경우 :active : 지정된 요소가 활성화된 경우 a:link { /* 방문하지 않은 a..
🎈참고. HTML 태그와 설명 1.1 폼 삽입 속성들 method : 사용자의 입력 내용을 URL에 포함하여 서버로 전송하는 get과 데이터를 요청 본문에 포함하여 전송해 URL에 데이터가 노출되지 않는 post name : 폼의 이름 action : 폼 태그 안의 내용을 처리해 줄 서버 프로그램 target : action 속성에서 지정한 스크립트 파일을 다른 창에서 열도록 autocomplete : 자동 완성 기능 (기본값 on) : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 : 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음 아이다 1.2 input 태그 태그의 type 속성 text - value maxlength size password - value maxle..
🎈참고. HTML 태그와 설명 1.1 HTML 기본구조 : 웹 문서의 유형을 지정. 현재 문서가 HTML5로 작성한 웹 문서 : 웹 문서의 시작과 끝을 나타내는 태그 : 웹 브라우저에 문서 정보를 알려주는 태그 : 실제로 웹 브라우저 화면에 나타나는 내용 1.2 태그 속 태그 : 글자 인코딩, 웹 문서의 키워드, 설명, 소유자나 작성자 등의 메타데이터 지정 : 해당 문서의 제목 : 해당 문서의 스타일 정보 정의 : 자바스크립트와 같은 클라이언트 사이드 스크립트 정의 : 해당 문서와 외부 소스(external resource) 사이의 관계 정의 2.1 내용 입력 ~ : 제목 : 문단 : 행 바꿈 : 수평 가로선 정의. 콘텐츠 내용에서 주제가 바뀔 때 주로 사용 : 인용블록 2.2 텍스트 효과 , : 굵게 ..
html 시멘틱 태그란? 시멘틱 태그란 웹 페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그를 의미한다. 헤더 영역을 나타내는 내비게이션 영역을 나타내는 핵심 콘텐츠를 담는 독립적인 콘텐츠를 담는 콘텐츠 영역을 나타내는 사이드 바 영역을 나타내는 맨 아래쪽 영역을 나타내는 시멘틱 태그는 왜 필요할까 첫 번째 이유는 웹 브라우저가 HTML 소스 코드만 보고도 어떤 부분이 제목이고 본문 내용인지 쉽게 알 수 있다. 특히 시각 장애인이 웹 사이트를 이용할 때 쓰는 화면 낭독기와 같은 보조 기기에서 사이트의 구조를 제대로 이해할 수 있다. 두 번째 이유는 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다. 마지막으로 인터넷에서 웹 사이트..
