Study Record

CSS 포지셔닝과 주요 속성브라우저 화면 안에서 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 두 속성이 있다. 바로 float 속성과 position 속성이다. 이 속성들과 박스 모델의 마진, 패딩, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 같은 내용이라도 어떻게 배치함에 따라 완전 다른 사이트처럼 보여진다.   박스 너비 기준 정하기 - box-sizing 속성박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야 한다. 모던 브라우저에서 박스 모델의 width 와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이이다. (인터넷 익스플로러 8 제외) 웹 문서에서 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 wid..

CSS 와 박스 모델웹에서 레이아웃을 간단히 말하면 여러 박스 모델들의 조합이라고 할 수 있다. CSS 박스 모델이란 말 그대로 박스 형태의 모델이다.   블록 레벨 요소와 인라인 레벨 요소박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 먼저, 블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. (ex. , ) 인라인 레벨(inline-level) 요소는 줄을 차지하지 않는 요소로 화면에 표시되는 콘텐..

그라데이션과 브라우저 접두사색상 그라데이션을 사용해 배경을 꾸밀 수 있다. 선형 그라데이션과 원형 그라데이션 총 두가지를 설명하려고 한다. 선형과 원형 그라데이션은 CSS3 에서 처음으로 소개된 기능이지만 구문이 복잡하고 브라우저 사이의 지원 방법이 달라 사용하기 어려웠다.  현재의 표준화된 구문 외에도 그라데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해야할 필요가 있다.접두사브라우저 버전-webkit-사파리 5.1~6.0-moz-파이어폭스 3.6~15-o-오페라 11.1~12.0 예시).grad { background: blue; /* 그라데이션을 지원하지 않는 브라우저용 */ background: -webkit-linear-gradient(left top..

웹에서 색상 표현하기웹에서 색상을 표현하는 방법은 16진수 표기법, rgba와 rgba 표기법, hsl과 hsla 표기법, 색상 이름 표기법이 있다.   16진수 표기법#ff0000 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법이 가장 기본적으로 색을 표현하는 방법이다.    rgb와 rgba 표기법16진수 표기법 다음으로 rgb 와 rgba 표기법이 있다. rgba 의 a(alpha)는 불투명도 값을 나타내는 것으로 1은 완전히 불투명한 것이고 0.9 나 0.8 처럼 숫자가 작아질수록 투명해지다가 0이 되면 완전히 투명해진다./* 기본형 */rgb(red 값, green 값, blue 값);rgba(red 값, green 값, blue 값, alpha 값);/* 예시 */color: rgb(2..

목록의 불릿과 번호 스타일 지정하기 - list-style-type 속성메뉴 항목이 목록과 링크를 결합한 형태이다. 목록과 링크를 만드는 속성에 대해서 알아보고자 한다. /* 기본형 */list-style-type: none | |    순서 없는 목록에서 불릿 모양 바꾸기 순서 없는 목록은 기본적으로 채운 원(disc)을 불릿으로 사용한다. list-style-type 속성의 여러 속성 값을 이용해 불릿을 바꿀 수 있다.none: 항목 앞에 붙는 불릿을 없앤다. 주로 네비게이션(메뉴)를 만들 때 불릿이 보이지 않게 사용한다.disc : 채운 원 모양의 불릿이다. 기본값이다.circle : 빈 원 모양의 불릿이다.square : 채운 사각형 모양의 불릿이다.  회사 소개 도서 사무실 ..

텍스트 스타일 텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일이다.   글자 색 지정하기 - color 속성웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다. 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla), 색상이름으로 표기할 수 있다.h1 {color:rgb(0,200,0);} h2 {color:blue;} .accent {color:#ff0000;}   텍스트에 줄 표시하기/없애기 - text-decoration 속성decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.h1 { text-decoration: underline; } /* 밑줄을 표시한다. */p { ..

글꼴 관련 스타일텍스트 스타일 중 글자의 모양새 즉, 크기와 굵기와 이텔릭체 여부 등 글꼴 속성을 알아본다.   font-family 속성 - 글꼴 지정하기웹 문서에서 사용할 글꼴은 font-family 속성으로 지정할 수 있다. p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}이미 설치된 글꼴이 아닌 경우, 브라우저의 기본 값이 나타나 각각 다른 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 위해 두번째, 세번째 글꼴까지 지정해야 한다. 두 개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 쉼표(,)로 구분한다. 시스템에 설치되..

스타일(style)이란?웹 에서의 스타일(style)은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것을 말한다. 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것을 '스타일 시트'라고 부른다. HTML 로 스타일 작업을 하지 않고 따로 스타일을 사용하는 이유로는 다음과 같다.웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.   스타일 형식선택자 { 속성: 값; }/* 예시 */h2 { font-soze: 20px; }p { font-size: 20px; color: orange;}   스타일과 스타일 시트웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많은데 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하..