너와 나의 개발 고리

float 속성 요소를 화면에 배치하는 position 속성과 또 다른 방법이다. float 속성은 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용하며 아래와 같은 용도에서 사용할 수 있다. 이미지 요소와 텍스트 요소 배치하기 블록 성격 요소를 인라인 성격 요소처럼 배치하기 형식) float:; 사용할 수 있는 속성값은 아래와 같다. 속성값 설명 n o n e float 속성을 적용하지 않습니다. l e f t 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다, r i g h t 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다. - 이미지 요소와 텍스트 요소 배치하기 이미지 요소와 ..

CSS에서 제공하는 속성 중에는 HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성이 있다. 이 속성들은 요소의 위치에 관여한다고 해서 위치 속성이라고 한다. position 속성 position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용한다. 형식) position:; 사용할 수 있는 속성값은 아래와 같다. 속성값 설명 s t a t ic 요소를 기본 흐름에 따라 배치한다. r e l a t i v e 요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있다. a b s o l u t e 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치한다. f i x e d 요소를 기본 흐름에서 벗어나 절대적인 좌쵸 위치에 따라 배치한다. 단,..

모든 HTML 태그는 박스 모델을 가지고 있다. 박스 모델에서 padding과 content 영역은 요소의 배경을 나타내는 영역인데, 이러한 박스 모델의 배경에는 색상이나 이미지와 같은 스타일을 지정할 수 있다. 1. background-color 속성 background-color 속성을 사용하면 요소의 배경에 색상을 넣을 수 있다. 속성값으로는 색상값을 사용하면 된다. 형식) background-color:; 만약 div 태그로 작성된 요소의 배경을 빨간색으로 지정하고 싶다면 아래와 같이 작성하면 된다. 코드를 실행하면 아래와 같이 div 요소의 배경에 빨간색이 적용된걸 확인할 수 있다. 2. background-image 속성 요소의 배경에 background-image 속성을 사용하면 이미지를 넣..

HTML의 모든 태그는 박스 모델을 가지고 있다. 그런데 이를 자세히 들여다보면 박스 모델도 블록, 인라인, 인라인 블록이라는 서로 다른 성격이 존재한다. 1. 블록 성격 블록 성격은 hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말한다. 그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈 된다. 2. 인라인 성격 인라인 성격은 a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말한다. a, span, strong 태그를 여러번 사용할때 웹 브라우저의 수평 공간이 남아있으면 한 줄로 배치된다. 3. 인라인 블록 성격 인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 ..

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다. 박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin, border 에 이어 padding에 대해 정리해보고자 한다. 1. padding 영역 padding 영역에서 사용할 수 잇는 속성은 margin 영역에서 사용하는 속성과 형식이 매우 비슷하다. 형식) padding-top:; padding-right:; padding-botton:; padding-left:; padding:[padding-top] [padding-right] [padding-bottom] [padding-left]; pad..

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다. 박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin에 이어 border에 대해 정리해보고자 한다. 1. border 영역 border 영역은 margin 보다 안쪽에 있으며, 요소의 테두리(경계선)를 담당한다. margin 영역과 동일하게 사용이 가능하지만 margin 속성과 달리 여러 속성값이 복합적으로 사용된다. 형식) border: ; - border-width 속성 border-width 속성은 테두리 굵기를 지정한다. 속성값으로는 단위를 포함한 크기를 사용한다. 형식) border-wi..

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다. 박스 모델은 크게 다음과 같이 4가지 요소로 구성된다. 구성요소 설명 margin 요소의 외부 여백을 의미한다. border 요소의 테두리(경계선)을 의미한다. padding 요소의 내부 여백을 의미한다. content 요소의 내용을 의미한다. 1. margin 영역 margin은 박스 모델에서 가장 외부에 있는 영역으로 요소의 외부 여백을 담당한다. 박스모델은 사각형 모양이라 각 방향에 해당하는 속성이 독립적으로 존재한다. margin 영역을 다룰 때 사용할 수 있는 속성으로는 margin-top, margin-righ..

1. font-family font-family 속성을 사용하면 글꼴을 지정할 수 있다. 속성값으로는 글꼴명을 적으면 되는데 쉼표(,)로 구분하고 1개 이상의 글꼴을 나열해 지정한다. 이때 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰따옴표("")로 항상 감싸야 한다. 형식) font-family:, , ...; 바탕체 글꼴과 타임스 뉴 로먼 글꼴을 적용하고 싶다면 아래와 같이 작성한다. font-family:BatangChe, "Times New Roman", serif; 단 font-family 속성은 반드시 글꼴 유형을 작성하도록 권장한다. font-family 속성으로 명시한 글꼴을 불러오지 못할 경우를 대비해 다음과 같이 불러오려고 한 글꼴과 유사한 형태의 글꼴 유형을 마지막헤 항상 지정 해야 한..

1. 기본 스타일 시트 hn 태그를 배울 때 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시되었다. HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없는데도 웹브라우저에서 hn 태그가 각각 다르게 표시된 이유는 웹브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문이다. 기본 스타일 시트 : 웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다 2. 적용 우선순위와 개별성 웹 브라우저는 기본 스타일 시트를 내장하고 있어서 몇 개의 태그는 이미 스타일이 적용된 상태로 표시되는데 여기에 별도로 스타일 속성을 정의하면 아래와 같다. h1 tag 코드를 실행..

1. 선택자 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원한다. 2. 기본 선택자 전체 선택자 : 모든 태그를 선택자로 지정한다. 태그 선택자 : 태그명으로 선택자를 지정한다. 아이디 선택자 : id 속성값으로 선택자를 지정한다. 클래스 선택자 : class 속성값으로 선택자를 지정한다. 기본 속성 선택자 : HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정한다. 문자열 속성 선택자 : 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정한다. 3. 조합 선택자 기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 한다. 그룹 선택자 : 여러 선택자를 , 기호로 구분해 선택자를 그룹으로 묶어서 지정 자식 선택자 : 선택자 범위를 ..