너와 나의 개발 고리

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

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

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다. 박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin, border, padding에 이어 content에 대해 정리해보고자 한다. 1. content 영역 content 영역은 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역으로 다른 박스 모델의 구성 요소와 다르게 content 영역 자체를 다루는 속성은 없다. 다만, 텍스트 관련 스타일 속성이면 모두 content 영역을 제어하는 속성이라고 할 수 있다. 추가로 content 영역은 제어하는 속성처럼 영향을 주는 width 속성과 ..

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

문제 1. p 태그를 모두 선택한다. 문제 2. id 속성값이 title 인 태그를 선택한다. 문제 3. class 속성값이 box이면서 id 속성값이 title인 태그를 선택한다. 문제 4. section 태그의 하위에 있는 모든 div 태그를 선택한다. 문제 5. label 태그와 인접한 형제 관계인 input 태그를 선택한다. 문제 6. 링크 대상 경로가 http://www.naver.com인 인 a 태그의 하위에 있는 span 태그를 모두 선택한다. ▼▼▼ 아래에 정답 있어요 ▼▼▼ 1. p 태그를 모두 선택한다. 더보기 2. id 속성값이 title 인 태그를 선택한다. 더보기 3. class 속성값이 box이면서 id 속성값이 title인 태그를 선택한다. 더보기 4. section 태그의 하..

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

작성한 CSS를 HTML 문서에 적용시키는 방법으로 대표적인 방법으로 3가지가 있다 1. 내부 스타일 시트 사용하기 내부 스타일 시트(internal style sheet)는 HTML 파일 내부에 CSS 코드를 작성하는 방법이다. HTML에서 제공하는 태그 중에 style 태그가 있는데 style 태그의 콘텐츠로 CSS 코드를 작성하면 된다. 실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할때는 아래와 같이 적용하면 된다. 내부 스타일 시트 style 태그를 사용하는 위치는 정해진 기준이 없지만 앞의 코드처럼 head 태그 안에 사용한다. 웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하며 표시되는 내용은 body 태그 안에 작성한다. hea..