오늘 해볼 것은
- 글자,단어 간격
- 대소문자 변경
- 목록 스타일 지정
- 목록 들여쓰기
- 목록 마커
를 해볼 것이다.
첫번째로 해볼 것은 글자와 단어의 간격을 넣는 것을 해볼 것이다.
| word-spacing : 숫자 단위; | letter-spacing : 숫자 단위; |
| 단어 사이의 간격 | 글자 사이의 간격 |
단어 사이의 간격은 word-spacing으로, 글자 사이의 간격은 letter-spacing으로 넣는다.
숫자의 간격이 커질수록 글자,단어 사이의 간격이 넓어진다.
음수를 넣는다면 간격이 좁아져 글자가 겹칠 수 있으므로 조심한다!
코드를 보고 이해해 보자.
body 안에다 h3 태그를 이용해 동일한 내용을 넣고 인라인 스타일을 사용해 서로 다른 스타일을 줘 봤다.
실행화면을 확인해 보자.
보이는 것 처럼 letter-spacing은 글자 사이사이의 간격이, word-spacing은 단어 기준으로 단어 사이사이의 간격이 벌어진다.
두번째로 볼 것은 대소문자 변경이다.
| text-transform | ||
| uppercase | lowercase | capitalize |
| 대문자 변환 | 소문자 변환 | 앞/첫 글자만 대문자 |
text-transform으로 3가지 기능을 사용할 수 있다.
대문자, 소문자 변환은 스타일을 지정한 모든 태그 안의 글자가 대/소문자로 바뀌게 되고
capitalize를 사용하면 앞/첫 글자만 대문자로 변환되는 것을 볼 수 있다.
코드를 보고 이해해 보자.
대문자 소문자로 바로바로 변환되는지 보기 위해서 text 상자안에 대문자, 소문자 변환하는 스타일이 들어갔다.
placeholder는 텍스트 상자 안에 들어가는 힌트 같은 것들을 말한다. 텍스트 상자를 클릭시 글자가 사라진다.
실행화면을 봐보자.
이런 화면이 뜨는데 한번 글자를 입력해보면
이제부터는 목록의 스타일들에 대해서 알아볼 것이다.
목록의 스타일, 목록의 위치(들여쓰기), 목록의 마커를 넣는 방법을 알아볼 것이다.
세번째로는 목록의 스타일을 넣는 방법을 알아볼 것이다.
우선 목록의 종류는 2가지가 있다. 기억이 안난다면
https://dotoristravel.tistory.com/12
HTML 프로그래밍 3/4 두번째(글씨관련태그, 목록)
글씨 관련 태그(굵기,기울임,위첨자 아래첨자) 인용구문 ← 태그 사용 시 ← 태그 사용 시 text강조(굵게 하기) - 둘다 똑같은 모습 1. 2. -> b=bold text 강조(기울임) - 둘다 똑같은 모습 1. 2. -> 이..
dotoristravel.tistory.com
를 보고 오는 걸 추천한다.
목록은 순서있는 목록과 순서 없는 목록이 존재하는데 각각 쓸수 있는 스타일이 정해져 있다.
우선 순서 없는 목록의 스타일을 봐보자.
| list-style-type : 값; | ||
| circle | disc | square |
| 속이 빈 원 스타일을 말한다. ex) ○ | 검은 원 스타일을 말한다. ex) ● | 사각형 목록의 스타일을 말한다. ex) ■ |
위 세가지가 순서없는 목록의 스타일에 넣을 수 있는 값들이다.
그리고 순서있는 목록의 스타일은
| list-style-type : 값; | ||
| none | decimal | decimal-leading-zero |
| 항목 표시가 되지 않는다. | 기본값, 10진수 1부터 숫자를 부여한다. | 10진수 0부터 숫자를 부여한다. |
| upper-roman | upper-latin | upper-alpha |
| 로마자 대문자(Ⅰ,Ⅱ,Ⅲ,Ⅳ)를 말한다. | 라틴 대문자(A,B,C,D)를 말한다. | 알파벳 대문자(A,B,C,D)를 말한다. |
| lower-roman | lower-latin | lower-alpha |
| 로마자 소문자(ⅰ,ⅱ,ⅲ,ⅳ)를 말한다. | 라틴 소문자(a,b,c,d)를 말한다. | 알파벳 소문자(a,b,c,d)를 말한다. |
위에 보이는 것처럼 여러가지 스타일들을 사용할 수 있다.
몇가지를 예시와 함께 봐보자.
이건 스타일이고,
이건 body 이다. 코드이다.
순서없는 항목 2개 스타일과 순서있는 항목 스타일 4개를 줘봤다.
실행화면을 봐보자.
위에 보이는 것처럼 순서없는 리스트 목록마크가 스타일에 맞춰서 바뀌어서 나온다.
순서있는 스타일 목록마크가 스타일에 따라 바뀌었다!
목록 스타일 포지션(들여쓰기)
들여쓰기는 inside라는 속성값을 이용해 주며, outside는 기본 값이다.
| list-style-position : 속성 값 ; | |
| list-style-position : inside ; | list-style-position : outside ; |
| 들여쓰기 | 기본 값 |
코드를 봐보자.
아래 코드를 보면 클래스 스타일과 인라인 스타일이 같이 들어가있다. 그렇다면 실행화면에서 어떻게 보일까?
아래에 보이는 것처럼
클래스 스타일 후 인라인 스타일로 다시 outside를 준 줄은 들여쓰기가 들어가지 안은 것이 보인다.
왜 그런걸까?
왜냐하면 CSS의 스타일 개념중에는 우선순위라는 것이 있다.
다른 개념은
https://dotoristravel.tistory.com/17
HTML 프로그래밍 일곱번째(CSS기본형식/스타일적용)
오늘은 CSS의 기본 형태 스타일 적용 을 배울거다. 1. 기본형태 우선 css를 사용할때 기본 형태를 알아보자. 선택자 { 속성: 속성값; 속성2: 속성값; } *CSS에서 값을 넣어주는 대입 연산자에는 :(콜
dotoristravel.tistory.com
에서 찾아보자.
우선순위 개념에서는 한 줄에 여러가지의 스타일이 있더라도
인라인스타일이 가장 우선시 되고, 그다음으로 내부 스타일 시트[id선택자 → 클래스 스타일 →타입선택자]순으로 우선시 되어 들어간다.
그래서 내부 스타일 시트로 줬던 들여쓰기가 아닌 인라인 스타일인 outside가 더 우선시 되어 스타일이 들어간 것이다!
만약 들여쓰기와 목록 마커 스타일을 한꺼번에 주고 싶다면
list-style : 목록 스타일 들여쓰기 ; 목록 스타일과 들여쓰기를 차례대로 한줄에 써서 효율성을 추구할 수 있다!
예시를 봐보자.
ex) list-style-type : upper-latin; + list-style-position : inside; → list-style : upper-latin inside ;
마지막으로
list-style-image는 목록 스타일에 자신이 지정한 사진을 넣는 것이다.
| list-style-image : url(" [이미지 경로] "); |
| 위 처럼 하면 이미지가 목록 스타일 자리에 들어간다. |
※ 이미지의 사이즈는 원본크기대로 들어가기 때문에 들어가는 이미지 사이즈를 꼭 고려해야 한다.
이건 직접 코드를 짜보진 않을 거다!
다음에는
표 캡션, 테두리, 셀(칸) 사이 여백 지정, 표와 셀 테두리 합쳐주는 스타일 등을 알아볼 것이다.