프로그래밍-학습기록/Web 4

CSS Position 속성 (static, relative, absolute, fixed)

Position 속성 position 속성은 요소의 위치를 정의한다. top, bottom, left, right 속성과 함께 사용하여 위치를 지정한다. position 속성의 값으로 static(기본 값), relative(상대 위치), absolute(절대 위치), fixed(고정 위치) static (기본 위치) static은 position 속성의 기본 값으로 position 속성을 지정하지 않았을 때와 같다. 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다. 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 좌표 속성(t..

CSS display 속성과 block, inline, inline-block, none

display 속성 display 속성은 레이아웃 정의에 자주 사용되는 중요한 속성이다. 속성의 값으로 다음과 같은 키워드가 있다. block → block 특성을 가지고 요소(block 레벨 요소)로 지정한다. inline → inline 특성을 가지는 요소(inline 레벨 요소)로 지정한다. inline-block → inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정한다. none → 해당 요소를 화면에 표시하지 않는다. 차지하는 공간도 사라진다. block 레벨 요소 block 특성을 가지는 요소는 아래와 같은 특징을 지닌다. 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. (width: 100%) width, height, margin, ..

CSS (개요, 선택자, 속성, 값)

CSS, Cascading Style Sheets Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다. - MDN HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS 없이도 어느 정도 스타일 표현이 가능했으나 정보와 구조를 담당하는 HTML 본연의 역할과 동떨어진 기능까지 추가됨으로써 복잡하고 혼란스러운 언어였다. HTML5에서는 HTML는 정보와 구조, CSS는 style의 정의라는 본연의 임무에 충실한..

HTML 개요

HTML은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)이다. HTML은 웹 페이지를 위한 지배적인 마크업 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠() 괄호 둘러싸인 "태그"로 되어 있는 HTML 요소(HTML element) 형태로 작성한다. 하이퍼텍스트는 사용자에게 내용의 비순차적 검색이 가능하도록 제공되는 텍스트이다. 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 마크업 언..