반응형

프로그래밍/HTML5 29

[html/css] 상속, 부모, 자식 용어정리?

css를 공부하면서 몇가지 정리되지 않은 용어들이 있어서 정리하려 한다. html 엘리먼트(element) - html 요소라고도 하며 태그를 의미한다. 나중에 다루게 될 박스모델에 대해서 간단히 언급하면, html 요소는 각각 박스(box)로 둘러쌓여져 있음을 말하며 박스의 크기를 결정하는 속성들을 css를 사용해 설정, 변경할 수도 있다. 각 html 요소의 박스 크기에 따라 다른 html 요소와의 상호작용을 통해 문서에 배치되는 모습이 결정된다. 예를들어 html 태그, body 태그, p 태그, div 태그들은 박스로 이루어져 있으며 다른 요소들의 내부에 배치될 수도 있고 다른 요소과 나란히 배치될 수도 있다. 부모, 자식 - html 요소들간에는 부모, 자식관계가 형성되는데 이런 관계는 상대적이..

[html/css] 레이아웃 속성(display, inline, block)

html문서에 문자나 이미지 등의 컨텐츠가 위치될 때 다양한 태그들로 둘러싸인다. 이런 태그들은 display 속성이 갖는 속성값(inline, block)에 따라서 컨텐츠의 표시되는 방식에 차이가 생기게 된다. inline 속성값을 디폴트로 갖는 태그는 a태그가 있고 block 속성값을 디폴트로 갖는 태그는 div, p 등의 태그가 있다. 설명에 앞서 이 태그들을 사용한 간단한 예제를 보자. 코드와 결과를 보면 div 태그로 둘러쌓인 내용(block) 앞뒤로 줄바꿈이 되어 있다. block 속성을 가진 태그는 욕심쟁이라서 한 라인 전체를 혼자서 다 쓰는 성질을 갖기 때문이다. 반면에 a 태그는 한 라인 내에서 다른 컨텐츠들과 어울어져 있다. 이런 기본적인 성질 외에도 inline 속성과 block 속성..

[html/css]가상 클래스 선택자(link, visited, active, hover, focus, nth-child)

선택자란 태그, id, class 등과 같이 html 문서에 존재하는 것들을 지정하는 것이다. 반면에 가상 클래스 선택자는 어떤 상태를 지정한다. 이런 상태는 태그, id, class 처럼 html문서 상에 있는 것이 아니다. 따라서 가상 선택자라고 한다. 예를들어 상태를 지정하는 가상 선택자에는 마우스를 올려 놓은 상태를 의미하는 hover 선택자, 방문하지 않은 링크를 나타내는 link 선택자, 이미 방문했던 링크를 선택하는 visited 선택자 등이 있다. 가상 클래스 선택자를 사용해서 상태에 따른 스타일을 지정하는 것이 오늘 공부할 내용이다. 하나씩 살펴보자. link, visited 가상 선택자 웹페이지에 있는 링크들은 기본적으로 파란색이다. 사용자가 링크를 클릭을 하면 오른쪽과 같이 보라색으로..

[html/css] 폰트(font) 속성 정리

css 폰트(font)에 관련된 주요 속성은 다음과 같은 것들이 있다. font-family, font-size, font-style, font-variant, font-weight 다음 역시 폰트에 관련된 속성이다. letter-spacing, word-spacing, line-height 속성이 이름만 봐도 대략 느낌이 온다. 이제 하나씩 알아보도록 하겠다. font-familiy 폰트 테스트, font Test, 1234567890 속성 이름 font-family에서 family는 집합을 의미한다. 코드를 보면 폰트(글꼴)이 여러개가 지정되어 있음을 알 수 있다. font-familiy의 속성 값들은 왼쪽에 있는 것이 우선순위를 갖는다. 위에서는 Nofont라는 폰트가 최 우선순위지만, 이런 폰트가..

css 선택자 개념과 종류

오늘은 css3를 처음으로 맛보는 날이므로 가볍게 css3가 어떻게 적용되고 css에서 선택자라는 녀석이 뭔지 살펴보겠다. 사실 본인은 웹 언어에 대해서는 적당히 알고는 있긴하지만 특별히 공부할 생각이 없었는데 c, java와 같은 범용적인 프로그래밍 언어보다 쉽고, 그 동안 부분적으로만 알아오다 보니 뭔가 답답하기도 해서 한번 쭉 정리하는 것이다. CSS는 HTML과 쌍을 이룬다. 최근 웹 페이지는 html문서와 css문서가 같이 사용되는데 html이 건축물이라면 css는 건축물을 꾸미는 인테리어라고 볼 수 있다. HTML 문서만 있더라도 웹페이지가 굴러가는데는 충분하다. 하지만 건축을 해놓고 인테리어를 안해 놓으면 누가 그 건물에 입주를 하겠나? 따라서 이 둘은 항상 같이 다닌다고 생각하면 된다. H..

HTML 태그 연습 리스트를 만드는 ul, ol, dl 그리고 li 태그

앞서 공부한 표를 만드는 table 태그와 더불어 오늘 연습할 리스트를 만드는 태그는 레이아웃을 설정하는 데도 사용되고 사용 빈도도 높으므로 꼭 알아 두어야하는 기본적인 태그다. 사용법은 table 태그와 비슷하다 다음은 테이블 태그의 형식이다. .. ... .. .... ol 태그, ul 태그이번에는 리스트 태그를 보자. 아이템 1 아이템 2 테이블의 시작과 끝을 알려주는 table 태그 처럼 리스트도 리스트의 시작과 끝을 알려주는 ol, ul 태그가 있다. ol, ul 둘 다 리스트지만 형식이 다르다. 아이템 1 아이템 2 ol은 ordered list의 약자로 순서가 있는 리스트라는 의미다. 그래서 아이템 앞에 번호가 매겨진다.아이템 1아이템 2 ul은 unordered list의 약자다. 순서는 ..

html 표만들기 정리

html 표만들기 태그를 정리입니다.html 표 만들기 태그의 구조 예제 값 ..... 값 ..... 표는 행과 열로 구성되어 있다. HTML 문서라고 다를 것은 없다. HTML 문서에서 표를 만들기 위해서는 세 개의 태그를 사용하는데 table 태그, tr 태그, td 태그다. table 태그는 표의 시작과 끝을 알려주는 태그다. 실질적으로 table 태그가 표를 그려주는 것은 아니다. tr 태그는 행을 그려준다. 앞에서 보여준 html 예제는 tr 태그가 두 번 사용되었다. 태그 시작과 끝을 포함해서 ... 을 한번으로 친다. 그리고 한 번의 tr 태그는 하나의 행을 만들어 준다. 따라서 앞에서 예로든 html 테이블은 두 개의 행을 가질 것다. table 태그와 tr 태그만 있는 표는 다음과 같아야..

HTML 태그와 속성 이해하기

HTML 태그란 무엇인가? 그냥 무작정 태그를 공부하기 보단 그 전에 왜 태그라는 것이 존재하는가에 대해서 나름 개인적으로 생각한 바를 이야기해 보겠습니다. HTML(Hyper Text Markup Language)은 웹문서를 작성하는 언어입니다. HTML은 프로그래밍 언어의 범주에 들어있지만 범용적인 프로그래밍 언어와 달리 문서를 작성하는데 특화된 언어입니다. 그래서 범용적인 프로그래밍 언어와는 구조적으로 많은 차이가 있습니다. 우선 HTML은 구조가 단순합니다. 문서를 만드는 언어이므로 가장 중요한 것은 문서의 내용입니다. HTML은 여기에 보조적인 역할을 하는 것이죠. 예를들어 특정 텍스트에 링크가 걸려있는 것은 웹 문서에서 흔하게 볼 수 있습니다. 바로 HTML 태그를 사용해서 이런 기능을 추가하..

HTML5 강의 시작

HTML(Hyper Text Markup Language)란 웹(web) 페이지를 만들기위해 사용되는 프로그래밍 언어! 그렇다면 웹(web)이란 일종의 문서 전송을 위한 서비스로 HTML로 만든 문서들이 얽혀 있는 것을 본 따서 웹(web)이라고 이야기 합니다. 대충 구조를 보자면 HTML로->웹문서가 만들어지고->웹(Web) 서비스를 통해서 사용자들에게 문서가 전달됩니다. www웹(wed)이라 하면 www(World Wide Web)를 뜻하는데 인터넷 상에서 이루어지는 서비스입니다. 구체적으로 웹(Web) 서비스라고 하면 HTTP를 통해서 HTML로 만든 문서를 전송할 수 있도록 구축된 서비스를 말하죠. 웹(web)서버, 웹(web)문서 웹(web)페이지 등등 웹이라는 말은 익히 많이 들어 봤을 겁니다..

반응형