HTML, CSS

1. CSS 박스 모델 블록(block) 요소 태그들은 모두 박스 형태를 취하고 있고, 원하는 위치에 배치하기 위해서는 CSS를 이용합니다. CSS를 통해 가로 세로의 크기를 지정할 수 있는데, 여백과 배치 형태를 설정하여 원하는 형태로 만들 수 있습니다. 이러한 박스 형태 요소를 스타일시트에서 'CSS 박스 모델'이라 합니다. 박스 모델로 콘텐츠 영역을 만들 때, 박스와 콘텐츠 영역 사이의 여백은 패딩(padding), 박스의 테두리(border), 그리고 여러 테두리와 이웃하는 요소 사이의 여백인 마진(margin) 요소로 구성됩니다. 각각의 요소는 별도 스타일로 지정이 가능하며 중복되는 영역은 하나로 묶어 지정할 수도 있습니다. block 형식 요소와 inline 형식 요소의 여백 인식 유무가 다른..

웹에서 텍스트를 스타일하기 위해 사용되는 CSS 속성이 많습니다. 1. color: 색상 텍스트 색상을 지정하는 데 사용합니다. color 속성으로 4가지 지정 방법이 있습니다. 1) 키워드 사용 red, blue처럼 명명된 키워드를 입력하면 됩니다. 2) 16진수 표기법 #ff0000같은 색상 코드를 입력하면 됩니다. 각 값들이 2번씩 반복된다면 생략이 가능합니다. 예시: #ffffff > #fff, #ff0000 > #f00, #ffaa00 > #fa0 3) RGB 색상 함수 rgb 값을 10진수 형식으로 표기하면 됩니다. 예시: rgb(100,255,0) 색상 범위는 0~255이며 쉼표로 구분합니다. rgba로 투명도까지 조절이 가능합니다. a는 알파채널(alpha channel)이며 투명도를 의미..

1. CSS란 웹 표준에서 CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. CSS에서 C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일시트'라는 의미입니다. 다만 HTML처럼 마크업 언어도 아니며 실제 프로그래밍 언어는 아닙니다. 스타일시트 언어로, HTML 문서 요소들에 선택적으로 스타일을 적용할 수 있습니다. HTML이 웹 문서의 뼈대를 구성하고 있다면, CSS(스타일 시트)는 텍스트 색상을 비롯해 태그의 크기, 위치, 색상 등 디자인 요소를 담당합니다. 2. CSS 기초 많은 웹 사이트들이 비슷한 디자인으로 여러 페이지를 제작하며 이때 스타일시트가 유용하게 사용됩니다. 스타일시트를 이용한 디자인 지정 방식은 다음과 같습니다. p의 color를 b..

1. 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다. HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너로 자주 사용됩니다. CSS와 함께 웹 페이지의 레이아웃을 설정하는데도 종종 사용됩니다. 대표적인 블록(block) 요소입니다. 2. 태그는 HTML 문서에서 인라인 요소들을 하나로 묶을 때 사용합니다. 요소는 그 자체만으로는 어떤 의미도 가지지 않습니다. 하지만 class, id 같은 속성을 함께 사용하여 요소를 그룹화하거나 속성을 공유하는 데 유용합니다. 대표적인 인라인(inline)요소입니다. 3. div와 span 비교 둘 다 그 자체로는 의미를 가지지 않습니다. 구역을 나..

1. 태그 태그는 anchor(닻)의 약어로, 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 태그에서 링크(link)의 목적지를 가리키는 href 속성이 반드시 필요합니다. href 속성이 없다면 다른 속성들도 사용할 수 없습니다. (target, download 등) 2. href 속성 href는 앞서 말한 것처럼 링크의 목적지이기 때문에 속성 값으로 경로가 들어갈 수 있습니다. hyun0907's Blog 바로가기 더보기 + 속성이란 태그에 대해 추가적인 정보를 제공할 때 사용하는 것입니다. 처럼 img 태그에 src, alt 2개의 속성을 가진 것을 볼 수 있습니다. 보통 속성="속성 값"으로 표기합니다. 하나의 태그 안에 속성이 ..

1. : 이미지 HTML 문서에는 img 태그를 사용하여 이미지를 넣을 수 있습니다. 웹 페이지에서 주로 사용되는 이미지는 다음과 같습니다. JPEG (대표적인 이미지 표현 방식으로 색상을 가장 잘 표현할 수 있음) PNG (투명한 배경을 나타낼 수 있는 이미지) GIF (움직이는 이미지로 투명한 배경을 나타낼 수 있으며 256색만 사용함) 는 종료 태그가 없는 단독 태그이며, inline 형식입니다. 만으로는 어떤 이미지를 넣을지 모르기 때문에 src, alt와 같은 속성을 사용합니다. width(이미지의 넓이 지정), height(이미지의 높이 지정) 속성은 스타일시트로 표현하기 때문에 따로 지정하지 않아도 됩니다. 하지만, src와 alt 속성은 반드시 명시해야 합니다. 문법 src 이미지가 저장된..

인라인 요소는 가로, 세로 값을 가질 수 없어서 텍스트를 다룰 때 적합합니다. 인라인 요소로 글자를 꾸며주는 스타일링 태그가 많습니다. 1. , : 글자를 굵게(bold) 글자 모양을 굵게 표시하려고 할 때 나 태그를 사용합니다. 결과가 동일하게 나타나지만, 차이점은 있습니다. 경고나 주의사항처럼 중요한 내용일 때는 보다는 을 사용하고, 글자를 단순하게 굵게 표시하고 싶다면 를 사용하면 됩니다. 을 사용하면 '화면낭독기'에서 알려줍니다. 이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다. 와 차이 정리 단순히 굵게 표시하기 위한 용도 중요성을 가지지 않기 때문에 의미가 없음 의미와 관계 없이 굵은 글씨를 사용한다면 css font-weight 속성 사용 중요성을 가짐 중요 내용이나 경고 표시할 때..

1. ~ : 긴 인용문 다른 출처로부터 인용된 블록을 정의할 때 사용합니다. 긴 인용문, 요약문, 설명 등에 적합합니다. 단락 전체가 들여 쓰기가 된다는 특징이 있습니다. 이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다. 2. ~ : 공백이나 줄 바꿈 그대로 적용 태그는 미리 정의된 형식(performatted)의 텍스트를 정의할 때 사용합니다. 또한 요소 내 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용합니다. HTML 문서에서 공백은 아무리 연속으로 많이 입력해도 한 칸으로만 인식합니다. 그래서 공백을 추가하기 위해서는 entity code의 로 표기하여 공백을 표시하는 방법이 있습니다. 하지만, 공백이 많으면 일일이 태그를 다 입력해야 합니다. 이를 해..