정리하고 기록하며 성장하는

박스모델 (Box-Model) 브라우저가 요소를 렌더링 할 때 , 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다 이 영역을 박스 라고 표현한다 css는 박스의 크기 , 위치 , 속성 (색 , 배경 , 테두리 모양 등)을 결정할 수 있다 하나의 박스는 다음 네 개의 영역으로 구성된다 콘텐츠 영역 - 박스의 중심부에 위치한다 너비와 높이를 가진다 테두리로 감싸져 있다 안쪽 여백 - 테두리를 중심으로 박스와 콘텐츠 사이의 공간을 확보할 수 있다 경계선 (테두리) - 박스가 테두리로 감싸져 있다 바깥쪽 여백 - 다른 요소와 필요한 만큼의 거리를 벌릴 수 있다 박스 각 영역의 크기는 어떻게 박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다 콘텐츠 영역 : width , height 안쪽 여..

박스모델 (Box-Model) 브라우저가 요소를 렌더링 할 때 , 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다 이 영역을 박스 라고 표현한다 css는 박스의 크기 , 위치 , 속성 (색 , 배경 , 테두리 모양 등)을 결정할 수 있다 하나의 박스는 다음 네 개의 영역으로 구성된다 콘텐츠 영역 - 박스의 중심부에 위치한다 너비와 높이를 가진다 테두리로 감싸져 있다 안쪽 여백 - 테두리를 중심으로 박스와 콘텐츠 사이의 공간을 확보할 수 있다 경계선 (테두리) - 박스가 테두리로 감싸져 있다 바깥쪽 여백 - 다른 요소와 필요한 만큼의 거리를 벌릴 수 있다 박스 각 영역의 크기는 어떻게 박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다 콘텐츠 영역 : width , height 안쪽 여..

블록 레벨 요소 vs 인라인 요소 블록 레벨 요소 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다 (ex. div , p , h1 등) 인라인 요소 자기에게 필요한 만큼의 공간만 차지한다 (ex. span , a 등) display 속성 display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할 지 정의한다 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면 div { display: inline; }​ 인라인 요소인 a 요소를 블록 레벨로 처리하고 싶다면 a { display: block; } display 속성 값 display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다 속성값 의미 inline 인라인으로 처리한다 (필요한 만큼의 공간 차지) block 블록 레벨..

글자를 꾸며보자 함께 공부해 볼 텍스트 관련 속성 font-family : 글꼴을 정의한다 font-size : 글자 크기를 정의한다 text-align : 정렬 방식을 정의한다 color : 글자 색상을 정의한다 font-family 요소를 구성하는 텍스트의 글꼴을 정의한다 글꼴명을 속성값으로 지정한다 여러개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다 사용 예 Times 폰트가 없으면 monospace 폰트를 쓰고 monospace 폰트를 쓸수 없으면 serif 폰트를 쓰겠다 *{ font-family: Times, monospace, serif; } 즉 , Times를 우선 지정하되 지원되지 안흥ㄹ 경우 monospace를 지정하겠다 font-family 사용 실습 코드 아무 내용 하하 반..

선택자 어떤 html 요소에 스타일을 적용할 것인지에 대한 정보 선택자 { 속성명: 속성값; } 선택자의 종류 기본 선택자 그룹 선택자 기본 선택자 - 전체 선택자 모든 요소를 선택한다 *(애스터리스크)는 html 문서 내의 모든 요소를 의미하는 기호이다 * { color: blue; } 문서 내 모든 요소의 글자 색을 파란 색으로 지정하겠다 전체 선택자 실습 코드 제목을 나타낸다 문단을 표시한다 가가가 문단을 표시한다 나나나 문단을 표시한다 다다다 기본 선택자 - 태그 선택자 주어진 이름을 가진 요소를 선택한다 유형 선택자 라고도 한다 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다 p { color: blue; } 문서 내 모든 p 태그 요소의 글자 색을 파란 색으로 지정한다 태..

CSS 기본 문법 선택자 { 속성명 : 속성값; } 선택자 : 어떤 요소에 스타일을 적용 할지 에 대한 정보 {중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상 , 크기 등) 속성값 : 어떻게 정의하고 싶은지에 대한 정보 CSS 기본 문법 사용 예 p { color: red; } 선택자 : p 태그에 스타일을 적용하겠다 {중괄호} : 이 안에 p태그에 대한 스타일을 정의하겠다 속성명 : color를 정의하겠다 , 이건 글자색을 의미한다 속성값 : red로 정의하겠다 . 빨간색 글자를 원한다 주석 사람에게는 보이지만 , 컴퓨터(웹브라우저)에게는 보이지 않는 코드 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다 HTML에 CSS를 더하..

css 계단식으로 스타일을 정의하는 문서 Cascading Style Sheets를 의미한다 Cascading : 계단식 Style : 멋을 내다 Sheets : (종이)한 장 CSS 목적 HTML 문서에 스타일을 더해준다 HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다 웹페이지의 스타일을 정의한다 HTML 문서와 CSS 문서가 합처져서 하나의 웹페이지를 완성한다 이를 웹브라우저로 연다 웹브라우저가 코드를 해석하여 웹페이지를 화면에 랜더링 해준다 CSS가 일하려면 CSS 문서(코드) 자체는 독립적으로 존재할 수 있다 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS는 사실상 의미가 없다 HTML : 웹 문서의 콘텐츠를 구성하는 언어 CSS :..