전체 글

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의 로 표기하여 공백을 표시하는 방법이 있습니다. 하지만, 공백이 많으면 일일이 태그를 다 입력해야 합니다. 이를 해..

HTML의 모든 요소는 둘 중 하나의 속성값을 가집니다. block과 inline 중 하나인데, 이 둘의 차이는 다음 글 하단 부분을 참고하면 되겠습니다.https://hyun0907.tistory.com/2 HTML 기본 구조 (1) - , , , 주석, block과 inline 1. HTML이란 Hypertext Markup Language의 약자로 사용자가 인터넷에서 클릭을 통해 자유롭게 이동하면서 해당 정보를 확인할 때 보는 웹 문서다. 대부분의 사용자들은 웹 사이트에 접속하여 정보를 얻는 hyun0907.tistory.com 1. ~ : 제목 제목(heading) 태그는 제목을 나타내고 구분 짓는 태그로, 중요도에 따라 사용됩니다. ~ 으로 사용되며 # 자리에 1~6까지 순차적으로 넣을 수 있습..

1. HTML이란 Hypertext Markup Language의 약자로 사용자가 인터넷에서 클릭을 통해 자유롭게 이동하면서 해당 정보를 확인할 때 보는 웹 문서입니다. 대부분의 사용자들은 웹 사이트에 접속하여 정보를 얻는데, 이때 눈으로 보면서 얻는 정보의 형태는 대부분 HTML 언어로 작성되어 있습니다. 2. 웹 표준 초창기 인터넷은 텍스트 정보, 간단한 이미지로 구성되었지만 사용자가 점점 늘며 더 많은 정보를 표현하게 되었습니다. 따라서 실용적인 태그와 다양한 브라우저를 이용한 접속에 대한 보편화된 웹 표준 정의가 필요하게 되었습니다. 웹 표준은 HTML4를 거쳐 현재 HTML5까지 발전했습니다. HTML5의 기본 목표는 모든 웹 표준을 지향하는 브라우저에서 웹 페이지가 동일하게 보이는 것으로 합니..