텍스트를 표현하는 다양한 스타일 (2)
·
Front end/CSS
이번 단원에서는 목록과 표의 스타일에 대해 배웠다. 목록은 쉽게 공부할 수 있었지만 표를 공부하는데는 조금 시간이 걸렸다. 내가 테이블에 대해 어렵게 생각한 탓인지 기초 지식이 부족해서 그런것 같아 이전에 표를 생성하는 html을 한번 보고 공부하니 조금 쉽게 이해를 할 수 있었다. 1. 목록 스타일 (list - style) 목록 스타일은 list - style - type 속성을 이용하여 정할 수 있다. 이 떄 스타일의 속성값의 종류는 아래와 같다. 종류 설명 예시 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1,2,3,... decimal - leading - zero 0으로 시작하는 10진수 01,02,03, ....
텍스트를 표현하는 다양한 스타일 (1)
·
Front end/CSS
이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다. 지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다. 텍스트의 효과를 바꾸는 속성 font-family (글꼴 지정) : 주로 태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : | [,] 으로 사용 → 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용 → 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음 font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로..
웹 문서에 디자인 입히기
·
Front end/CSS
저번 단원에서 html을 마치고 css를 처음 시작했다. css는 웹의 보이는 모습을 만들고 움직이는 형태까지 만들 수 있다길래 어렵지 않을까 생각했었는데 생각보다 쉬웠고 재미있었다. 아 그리고 하나 궁금증이 생겼는데 ID선택자는 문서에서 한 번만 적용할 수 있다고 한다. 그러면 굳이 ID를 만들지 않아도 인라인 스타일을 사용해서 원하는 줄의 스타일을 바꾸면 되지 않을까하는 것이다. 그런데 지금 생각해보니까 외부 스타일을 이용하기 위해서는 ID 선택자를 쓸 수밖에 없을 것 같다. CSS(Cascading Style Sheet) CSS를 사용하는 이유 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 CSS의 스타일형식 선택자 {속성1 : 속성값 ..