STUDY/CSS 4

box model: border, block, display:none, padding, margin, width

태그는 줄 바꿈이 되지만 태그는 줄 바꿈이 되지 않는 이유 : 태그는 제목 태그이고, 이는 화면 전체를 쓰는 것이 더 편리하기 때문이다. 링크 앞뒤에 있는 콘텐츠가 줄 바꿈이 된다면 상당히 불편하므로 링크는 줄 바꿈을 하지 않고 자기의 콘텐츠 크기만큼을 사용한다. 웹페이지에 있는 모든 에 대해서 테두리를 만들기: border border-width: 테두리의 두께 border-color: 테두리의 색상 border-style: 테두리의 생김새(단선인지, 점선인지 등) 화면 전체를 쓰는 과 자기의 콘텐츠 크기만큼의 부피를 쓰는 의 모습이다. 인 윗 칸과 인 아래칸 박스 크기의 차이로 확인해볼 수 있다. "block": 화면 전체를 쓰는 태그 한 영역을 차지하는 박스 형태를 가지는 성질. 때문에 width ..

STUDY/CSS 2022.01.29

font-size, text-align, id, class, saw, 우선순위

글씨 크기를 조절하고자 할 때의 검색어 : css text sixe property font-size: px; 가운데 정렬하고자 할 때의 검색어 : css text center property text-align: center; 파란색: 아직 방문하지 않았다 보라색: 한 번 방문했었다 ​ Q. 모든 a 태그를 검은색으로 바꾸고 방문했었던 HTML과 CSS는 회색, 현재 방문하고 있는 CSS는 빨간색으로 바꾸고 싶을 경우에는? ! 회색으로 표기 가능하나 코드에 중복이 생기게 됨. ​ 그래서 class라고 하는 HTML의 속성을 부여하고, 속성의 값으로 '보았다'라는 뜻에서 saw라고 지정한다. 다음과 같이 입력하였을 경우 적용되지 않는다. ​ 보라색 "saw"의 의미란 이 웹페이지의 모든 saw라는 이름의..

STUDY/CSS 2022.01.28

style="color:red", text-decoration, 선택자Selector

현재 이용자가 2. CSS 페이지에 머무르고 있다는 표시를 해주고 싶을 때, 2. CSS에 컬러를 입히고자 한다. ​ style = : 값으로 반드시 CSS의 효과가 들어 온다는 의미. ​ : 속성이 효과만 있어서는 이 효과(색을 바꾸는 것)를 어디에 지정할지 설명할 수 없기 때문에 a { } 라는 코드가 추가적으로 들어오는 것이다. ​ a { } : 선택자Selector color:black; : 효과, 선언Declaration 밑줄 없애는 법 ; 의 의미: 디스크립션이 시작되고 끝나는 것을 구분하기 위해서 구분자로 세미클론을 입력. 효과 지정 후 ; 필수 ​ 2. CSS에만 밑줄을 긋고자 한다.

STUDY/CSS 2022.01.28

CSS의 정의, <!--, -->, <style>, a color:(color), 효율적인 코드

CSS: cascading style sheets (스타일 시트) ​기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 CSS이다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. ​ 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할..

STUDY/CSS 2022.01.28