Style Link - 링크는 CSS 속성(예 : color : font-family, background 등)을 사용하여 스타일을 지정할 수 있다. - Link에 text-decoration(구분선), background-color(배경색)을 지정할 수 있다. - 링크 상태는 다음과 같다. a:link - 방문하지 않은 정상적인 링크 a:visited - 사용자가 방문한 링크 a:hover - 사용자가 마우스를 위에 올려놓았을 때의 링크 a:active - 클릭하는 순간의 링크 [주의사항 1] a:hover는 반드시 a:link 및 a:visited 뒤에 와야 한다. [주의사항 2] a:active는 반드시 a:hover 뒤에 와야 한다. /* unvisited link */ a:link { color..

개발 블로그를 시작한 3일차 새싹 블로거인 나는 열심히 실습 코드를 분주하게 정리하고 있다. 하지만 가독성을 정말 중요하게 생각하는 나는 소스 코드를 올릴 때마다 글쓸 때와 다르게 깨져서 보이는 현상이 있었다. 남들은 정말 예쁘게 나오고, 글 쓸 때까지만 해도 이런 모양이 아니었는데... 이유를 알아보고자 구글링을 했지만 나와 같은 현상이 일어나는 분들을 위해 짧게 포스팅 하고자 한다. 1. 티스토리 블로그 설정에 들어간다. 2. 설정에서 맨 아래 플러그인을 클릭한다. 3. 들어가게 되면 수많은 플러그인들이 있다. 혹여나 필요한 기능들은 추가하면 좋다. (오른쪽 마우스 금지 등) 그 중에서 우리는 맨 아래에 있는 "코드 문법 강조"를 설정하면 된다. 설정하게 되면 테마도 설정할 수 있으니 본인이 원하는 ..

CSS Text - 텍스트 서식 지정을 위한 속성이다 Text Color - 속성 color는 텍스트 색상을 설정하기 위해 사용한다. - 색상은 다음과 같이 지정된다. 색상 이름 : 빨간색 HEX 값 - 예 : "#FF0000" RGB 값 - 예 : "RGB(255, 0, 0)" This is heading 1 This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector. Another paragraph. HTML 삽입 미리보기할 수 없는 소스 Text 정렬 - text-align 속성은 텍스트의 가로 정렬을 설정하기 위해 사용한다. - ..

CSS Box Model CSS에서 디자인과 레이아웃을 말할 때 사용하는 용어 Box Model은 기본적으로 모든 HTML 요소를 둘러싸는 상자이다. 내용, 패딩, 테두리 및 여백으로 구성. Content : 텍스트와 이미지가 표시되는 상자의 내용 Padding : 콘텐츠 주변 영역을 지운다. Border : Padding과 Content를 둘러싸는 테두리 Margin : 테두리 외부 영역을 지운다. div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 요소의 Width(너비)와 Height(높이) CS 사용하여 요소의 Width와 Height 속성을 설정할 때 Content 영역의 Width와 Height만 설정하면 된..

CSS Backgrounds body { background-color: lightblue; } - 배경 효과를 추가하기 위해 사용 background-color background-image background-repeat background-attachment background-position background(shorthand property) - CSS에서 색상은 HEX 값과 RGB 값으로 지정한다. HTML 요소마다 배경색 설정 h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } 투명도 속성 opcacity은 불투명도/투명도를 지정하며 0.0 ~ 1.0 사이의 값을..