전체 글

텍스트 꾸미기 글꼴 바꾸기 font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용 한 개 이상의 글꼴을 지정할 수 있음 입력한 글꼴 뒤에 쉼표를 입력후 새로운 글꼴을 이어서 입력하는 방식으로 속성값 지정 먼저 쓰여진 글꼴부터 우선적으로 요소에 지정 먼저 쓰여진 글꼴이 없으면 다음에 있는 글꼴이 적용 웹 폰트 사용하기 컴퓨터 시스템에 해당 포트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아서 사용할 수 있는 글꼴 웹폰트를 사용하여 잘못 입력된 글꼴이거나, 시스템에 설치되어 있지 않아 요소에 적용되지 않는 것을 방지 텍스트 꾸미기의 속성 속성명 설명 속성값 유형 font-size 글자 크기 지정 수치와 단위 font-weigth 글자 두께 지정 별도의 키워드 line-heig..

배경 다루기 background 단축속성 콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있음 배경으로 추가된 색상이 나이 미지 등은 박스 모델의 바깥쪽 여백을 제외 한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침 접미사 접미사 설명 속성값 유형 -color 요소의 배경 색상 지정 색상 -clip 요소 내 배경의 적용 범위(에디에만) border-box padding-box content-box -image 요소의 배경 이미지 지정 이미지 url -origin 요소 내 배경의 시작 위치(에디서부터) border-box padding-box content-box -size 배경 이미지의 크기 수치와 단위 -position 배경 이미지의 위치 수치와 단위 -repeat 배경 이미지..

박스 모델(Box Model) 너비와 높이를 가지는 개별 요소를 가리켜 ‘박스’라 표현하고, 박스를 네 가지 세부 영역으로 나누어 구분한 일종의 디자인 모델 CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있음 CSS는 영역 별 크기도 다로 설정할 수 있도록 다양한 속성들을 제공 박스 모델의 세부 영역들 영역 설명 관련 속성 콘텐츠 영역 요소 내에 포함된 콘텐츠를 표시하는 영역 width, height 안쪽 영역 테두리 안에서 콘텐츠 주변을 감싸는 여백 padding 경계선(테두리) 콘텐츠와 안쪽 여백을 둘러싸는 테두리 border 바깥쪽 여백 테두리 바깥에서 요소를 감싸는 여백 margin 테두리 스타일 화면에 요소가 차지하고 있는 공간을 뚜렷하게 ..

선택자 스타일 선언문의 선택자가 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정 요소는 오직 하나만 선택할 수 있고 여러 개를 동시에 선택할 수도 있음 CSS느 다음과 같은 유형의 선택자를 지원 선택자 의미 사용기호 전체 선택자 문서내 모든 요소를 선택 태그 선택자 특정 태그로 만들어진 모든 요소를 선택 태그명 클래스 선택자 특정 클래스 값이 지정된 모든 요소를 선택 .클래스값 아이디 선택자 특정 아이디 값이 지정된 요소를 선택 #아이디 값 그룹 선택자 여러 유형의 선택자를 한꺼번에 선택 선택자, 선택자, … 선택자 우선순위 아이디 선택자 클래스 선택자 태그 선택자

CSS문서 독립적으로 존재할 수 있지만 HTML 문서와 함께 사용하지 않는 CSS 문서는 단지 텍스트에 불가 HTML문서에 적용하고자 할 때는 아래와 같은 방법을 사용할 수 있음 인라인 스타일 : 태그에 직접 기술 style 속성을 추가하여 요소를 직접 스타일 하는 방식 선택자 필요 없음 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋음 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술 HTML 문서에 태그를 추가하여 그 안에 CSS 코드를 작성 항 수 있음 ‘내부 스타일 시트’라 표현하기도 함 문자 간의 연결 : 스타일 시트 문서를 따로 작성하여 HTML 문서와 연결 확장자가 *.css인 스타일 시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결해 줄..

소개 및 문법 CSS는 캐스케이딩 스타일시트(Cascading Stylesheet)를 의미 cascading : 폭포 같은, 계속되는, 연속적인 style : 멋을 내다 sheet : 한장 연속적으로 스타일을 정의하는 문서 스타일을 정의하는 문서 형식으로 태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML 문서에 스타일을 추가함 HTML은 웹페이지의 콘텐츠를 정의하는 언어이고 CSS는 해당 문서에 스타일을 추가하는 것 HTML코드가 다수의 ‘태그’고 구성되는 것처럼 CSS는 ‘스타일 선언문’으로 구성됨 선택자{ 속성명: 속성값; } 선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보 {} : 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 속성값 : ..

문서 정보 관리하기 - 메타 데이터 HTML 문서에 대한 메타 데이터를 정의 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문자의 작성자 및 뷰포트 설정을 지정하는데 사용 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색결과에 반영할수 있기때문에 사용 meta 태그가 제공하는 메타데이터의 유형과 속성 charset : 문자 세트 http-equiv : 콘텐츠 속성 정보에 대한 http 헤더 name : 문서 정보 content : 메타데이터 내용

의미론적인 코드 - 시맨틱 태그 개발자와 브라우저에게 의미를 제고하는 태그 콘텐츠 태그명은 ‘이 요소가 가진 목적이나 역할은 무엇인가?’를 나타냄 검색엔진에게 좋은 단서가 됨 대부분의 시멘틱 태그는 컨테이너 태그와 같이 특별한 스타일을 제공하지 않지만 이점을 가져다 줌 검색엔진은 시맨틱 태그를 중요한 단서로 봄 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조 됨 코드의 가독성이 좋아짐 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편함 대표적인 시맨틱 태그들 태그명 의미 태그명 의미