본문 바로가기

분류 전체보기

 (102)
[CSS] Chapter 12. 배경 꾸미기 *{} #wrap{ width:600px; height: 600px; padding: 10px; border: 10px dotted black; margin: 0 auto; background-image: url("p2.jpg"); /*반복 여부는 기본 값이 모두 반복이다. no-repeat: 반복 안함 repeat-x: 가로로만 반복 repeat-y: 세로로만 반복 repeat: 가로세로 꽉차게 반복 */ background-repeat: repeat; background-position: center top; /* background-position: 가로 세로; 배경 위치 지정은 키워드로 가능하다. 가로: left right center; 세로: top bottom center; */ /*backg..
[CSS] Chapter 11. 레이아웃(Layout) 구성: CSS 위치속성 1. 개요 웹 사이트는 컴퓨터의 발전과 모니터 해상도의 변화로 발전해왔다. 과거 인터넷은 정보 교환을 목적으로 하였고, 모니터의 해상도도 높지 않아 정보 전달만으로 기능이 충분하였다. 하지만 기술의 발전에 따라 사용자의 편의성과 화면분할의 중요성이 대두되었다. 사용자는 인터페이스와 레이아웃에 따라 심미적으로 충족하는 상품에 소비하는 경향을 보인다. 이런 디자인 요소가 소비에 영향을 미치는 것은 많은 연구와 통계로 증명된 사항이다. 즉, 웹 사이트 또한 기술의 발전과 함께 소비 시장에서 살아남기 위해 자연스럽게 레이아웃, 디자인 요소가 발전한 것이다. 이러한 레이아웃 요소를 만들고 구성하는 기능이 바로 플로팅이다. 다만 플로팅은 사용이 어렵고 여러 이슈가 있어 능숙하게 사용하기가 어렵다. 2. 레이아웃 화..
[CSS] Chapter 10. border의 속성과 사용 1. 개요 border는 Box 모델에서 해당 태그가 가지고 있는 테두리로 태그가 가진 모양 요소 중 하나이다. border에 부여되는 선이나 모양에 따라 화면 구성이 바뀌며, 일반적으로 화면 구성 요소가 올바르게 적용되었는지 확인하기 위해 직선을 부여하여 배치를 확인한다. 2. Mark-up 확인 후 border에 입력한 속성의 초기화 border를 사용하여 마크업 상태를 파악하는 경우, 반드시 border에 입력한 px 값을 화면 구성에서 고려해야 한다. 일반적으로 border가 0px로 사용되어야 하는 화면이라면 border 속성 1px은 화면 구성 자체에 중대한 문제점을 야기할 수 있다. 이는 html의 요소가 box 구성으로 적용되고, 각 요소가 border을 가지기 때문이다. 쉽게 말해 콘텐츠..
[CSS] Chapter 09. block과 Inline 1. 개요 블록(block)은 웹페이지 화면에서 가로 영역 전체를 차지하는 태그를 말한다. 대표적인 태그로는 , ,이 있다. 해당 태그의 가장 주요한 특징은 데이터를 표시할 때, 반드시 ‘개행(줄바꿈)’을 진행한다. 때문에 다른 요소가 자신의 옆에 표시되는 것을 거부하는 특징을 가지고 있다. 위의 태그를 이용하여 모양을 구성한다면, display 값을 inline으로 구성하거나 span 태그를 사용할 필요가 있다. 2. 기본 형태 시간이란... 내일 죽을 것처럼오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. 위의 3가지의 태그는 확인할 수 있듯이 Contents보다 큰 영역을 차지한다. 때문에 다른 데이터와 병합되거나 나란히 존재하기 어려우며, 만약 이를 지정하고 싶다면 해당 태그의 표현방식을 지정할 필..
[CSS] Chapter 08. BOX 모델 1. 개요 BOX 모델은 html 문서에서 구현되는 정보의 기본 형태를 정의하는 것으로, 가시적으로 구현되는 태그는 모두 BOX 모델을 기준으로 모양이 구성된다. content는 해당 태그에 담기는 데이터를 말하며 실제 눈으로 구현되는 정보이다. padding은 데이터와 테두리 사이의 여백을 말한다. border는 해당 태그가 가지는 테두리를 말한다. margin 은 태그끼리의 거리를 말한다. 2. BOX 모델의 중요성 BOX모델의 중요한 점은 태그가 가진 영역의 간격과 정보를 각각 조정할 수 있다는 것이다. Style을 통해 id, class, tag 등 원하는 항목에 BOX 모델의 영역을 지정할 수 있다. 때문에 기본적으로 가지고 있는 영역값을 각각 지정하여 모양을 구현할 수 있고, p 태그가 아닌 ..
[CSS] Chapter 07. text, list, table의 속성 1. text의 정렬: text-align: text는 style에서 id, class, tag 로 정렬에 대한 모양지정이 가능하다. 해당 기능을 사용하면 웹 페이지를 기준으로 글자의 위치를 조정할 수 있으며, 창의 크기에 상관없이 지정한 위치로 글자 정렬이 진행된다. 기본 형태: {text-align: center} (or center 이외에 좌, 우 등 지정 가능) 2. 줄간격 조정: line-height: 을 이용하여 줄을 변경하면, 줄 사이의 간격이 좁고 일정하다. 해당 style은 지정한 tag, id, class의 줄바꿈 모양을 지정할 수 있다. 단위는 px, %, 0.0 등 다양하게 지정할 수 있다. 단위가 지정되지 않으면 * 배수로 처리된다. 해당 간격의 % 및 배수는 font의 크기에 비..
[CSS] Chapter 06. Color의 이해 1. Hex Color: #000000; ~ #fffff; Hex Color는 색깔의 변화를 Red, Green, Blue을 각각 16진수로 삽입하여 색을 표현하는 방식이다. 16진수는 0~9, a~f 를 조합한 것으로 ff가 가장 높은 수(15)이다. Style에서 Color를 적용할 때, 0~f의 조합을 통해 색을 구현할 수 있다. rgb를 따라 진행하므로 3자리 혹은 6자리로 구현이 가능하다. 기본적으로 #00000 식으로 기입한다. 6자리의 구현이 더욱 정밀하다. 예) color:#0000ff Hex 코드를 10진수로 표현하면 255,255,255 의 숫자로 구성되는데 이는 RGB 값과 동일하다. 때문에 RGB를 통한 색상 지정도 가능하며, RGB의 경우, RGBA 로 추가하여 투명도까지 설정할 ..
[HTML] Chapter 10. Tag 모음 (Ctrl+F) 1. 기본 요소 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. HTML 문서의 루트 요소(root element)를 정의함. 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함. 해당 문서의 콘텐츠 영역을 정의함. 해당 문서에 대한 정보인 메타데이터(metadata)를 정의함. 해당 문서의 제목(title)을 정의함. 해당 HTML 문서의 스타일 정보를 정의함. 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함. 변수(variable)를 정의함. 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함..

티스토리툴바