'Web/HTML&CSS' 카테고리의 글 목록

Web/HTML&CSS

Covenant

2017.07.28

블록레벨(block-lebel) 요소 태그를 사용해 요소를 삽입했을 떄 혼자 한 줄으르 차지하는 요소해당 태그 : , ~, , , , , ,, ,, 인라인 레벨(inline-level) 요소줄을 차지하지 않는 요소. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 해당 태그 : , , , , , , , , , 박스 모델(box model) 요소- 위의 블록 레벨 요소들은 모두 박스 형태이다. 예를 들어 태그를 사용하는 텍스트 단락은 블록 레벨 요소인데 텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가진다 - width, height속성 : 콘텐츠 영역의 크기width: 크기 | 백분율 | auto height: 크기| 백분율 | auto- ..

[CSS기초]04 글꼴 관련 스타일

2017.07.28

font -family 속성 - 글꼴 지정하기예] p {font-family: 굴림;}- 웹 문서에서 글꼴을 지정할 때는 한 자기 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정해야 한다. 두 개이 상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 ,로 구분한다.- 그러면 사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려고 하면 웹 폰트를 사용하면 된다. 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장 했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식이다. font-size 속성 - 글자 크기 조절하기- 단위em : 해당 글꼴의 대분자 M의 너비를 기준으로 크기를 조절한다.ex : 글꼴..

[CSS기초]03 캐스캐이딩 스타일 시트

2017.07.28

캐스캐이딩(Cascading)이란?위에서 아래로 흐르는 스타일 시트라는 뜻으로 스타일간 충돌을 막기 위해 위에서 아래로 흐르며 적용되는 방법이다.다음 두 가지 윈칙을 따른다.1. 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.2. 스타일 상속 : 타그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 위에서 아래로 전달한다. 스타일 우선순위1. 중요도사용자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 일반 스타일 -> 사용자 스타일 시트의 일반 스타일 > 브라우저 스타일 시트의 스타일최우선순위 우선순위 낮음 2. 명시도인라인 스타일 > id 스타일 > 클래스 스타일 >..

[CSS 정리]02 주요 선택자

2017.07.27

도입 선택자는 태그 하나하나가 될 수 았지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수 있다. 이렇게하면 일일이 스타일을 지정하지 않고도 스타일을 쉽게 지정할 수 있다. 여기서는 주 되게 사용하는 선택자 5개를 알아보겠다. 1. 전체 선택자(Universal selector) 전체 선택자는 모든 요소에 적용할 때 사용한다. 주로 하위 요소에 한꺼번에 스타일을 적용할 떄 사용한다. 전체 선택자로는 *를 사용한다. 문서의 여백이나 글꼴 크기등 기본 스타일을 초기화 할 떄 사용한다. 예를 들어 웹 문서를 브라우저에 표시할 때 문서 내용 바깥쪽에는 마진을 두고 문서 내용 안쪽에는 패딩이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않는 경우, 전체 선택자를 이용해 웹 문서 전체에 마진과 패딩 여..

[CSS 기초]01 CSS 적용하기

2017.07.27

웹 문서에서의 스타일 : HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉 표면을 결정짓는 내용들. CSS(Cascading Style Sheets) : CSS는 텍스트이 색상이나 크기, 이미지의 크기나 위치, 표 색상 배치 방법 등 웹문서의 디자인 요소를 담당 스타일 형식- p { text-align : center } 선택자 스타일 속성 속성값- 속성과 속성값은 ;으로 구분한다. p { text-align : center; font-size: 16px } 스타일 주석- /* */ 사이에 주석을 입력한다. 스타일을 어디에(html안, 혹은 별개의 파일, 혹은 바로 적용의 여부)적용하는 방법에 따라 3가지로 구분할 수 있다.1. 내부 스타일 시트 웹 문서 안에 사..

Covenant

Web/HTML&CSS

[CSS기초]박스모델

[CSS기초]04 글꼴 관련 스타일

[CSS기초]03 캐스캐이딩 스타일 시트

[CSS 정리]02 주요 선택자

[CSS 기초]01 CSS 적용하기

티스토리툴바