웹 만들기

웹을 알고싶다면?? HTML5 & CSS3부터 !!! #웹 개발 HTML5 & CSS3 기초 교육자료입니다. 기본적인 태그와 스타일 등을 알아야 실습 프로젝트를 할 수 있습니다. #실습 위 태그들을 공부하시고 실습자료를 …

@web's CSS코드펜 레퍼런스 사이트입니다.

<a>

<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.

이러한 <a> 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.

따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.

링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있습니다.

링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.

- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)

- 방문했던 링크(visited link) : 밑줄, 보라색(purple)

- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)

<span>

<span> 태그는 HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.

<span> 요소는 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있습니다.

<span> 요소는 <div> 요소와 매우 비슷하게 사용되지만, <div> 요소는 블록 타입의 요소인데 반해 <span> 요소는 인라인 타입의 요소입니다.

<div>

<div> 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다.

<div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다. 또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다.

<p>

<p> 태그는 문단(paragraph)을 정의할 때 사용합니다.

브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가합니다.

이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있습니다.

<strong>

<strong> 태그는 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용합니다.

브라우저는 일반적으로 <strong> 요소의 콘텐츠를 굵은 텍스트로 표현합니다.

<b> 요소는 콘텐츠의 중요성보다는 텍스트 자체에 주의를 끌기 위해 사용되지만, <strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용됩니다.

<em> 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용되지만("I love cat." vs. "I love cat."), <strong> 요소는 문장의 일부분에 중요성을 추가하는데 사용됩니다.("Warning! This is very dangerous.")

<strong> 요소와 <em> 요소는 각각 중첩해서 사용함으로써 중요성이나 강조의 상대적인 정도를 증가시킬 수 있습니다.

<li>

<li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다.

<li> 요소는 순서가 있는 리스트(ordered list)를 정의하는 <ol> 요소나 순서가 없는 리스트(unordered list)를 정의하는 <ul> 요소, 메뉴 리스트(menu list)를 정의하는 <menu> 요소에서 리스트의 각 아이템을 정의합니다.

리스트 아이템을 나타내는 기본 마커(marker)는 순서가 없는 리스트나 메뉴 리스트에서는 검정색의 작은 원(bullet) 모양으로 표현되며, 순서가 있는 리스트에서는 아라비아 숫자나 알파벳으로 표현됩니다. 이렇게 리스트 아이템을 표현하는 마커(marker)는 CSS를 사용하면 다른 모양으로 손쉽게 변경할 수 있습니다.