1. css 색상을 지정하는 세 가지 방법
- hex 색상코드 : 예) #eb4639
- rgb 값 : 예) rgb(235,70,57)
- hsl(색상 채도 명도) : 예) hsl(4, 82%, 57%)
구글 color picker 또는 color picker, hex color 앱 사용해서 적용이 가능하다.
변환기능도 활용할 수 있다.
만약 hex 표현에서 rgb 표현으로 바꾸고자 할 때,
color hex to rgb 이런식으로 구글 검색 및 변환이 가능하다.
2. css 로 들여쓰기 및 스페이스 추가하기
- text-indent: px 속성으로 들여쓰기를 임의로 줄 수 있다.
- blockquote 는 인용구문을 넣을 때 쓰는 태그이며 닫힘 태그가 필요하다.
- 문장 사이사이에 스페이스를 원하는 만큼 추가하고 싶을 때
<p> </p>
스페이스를 의미하는 코드이다. 여러개 쓰면 그 개수만큼 space 가 생긴다.3. 텍스트에 밑줄 긋는 두 가지 방법
3-1. 첫번째 방법
css 에 text-decoration 속성을 underline 으로 주는 방법
3-2. 두번째 방법
border-bottom 을 이용하기 : 내가 원하는 스타일로 밑줄을 칠 수 있어서 커스터마이징에 용이함. 대부분의 개발자들이 선호하는 방법이다.
4. box-sizing: border-box;
눈으로 보는 너비와 높이가 개발자가 코딩하는 그 값이여야 되므로, 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용한다.
* {
box-sizing: border-box;
}5. 부모 자식 요소의 특정 관계 (알게된 것)
5-1. 폭의 조절
부모요소의 width 폭이 지정되면 자식요소의 width 폭을 % 로 설정함으로써 비로소 조절이 가능해 진다.
5-2. 스타일의 상속의 예외
부모요소가 css 의 (예: color:red;) 라는 속성이 있어도 자식 요소가 해당 특정 속성을 갖고 있다면 그 스타일로 적용된다.
6. css 선택자의 결합
- p태그 이면서 p-tag 클래스인 경우.
p.p-tag {
}- p태그 이면서 third-line 아이디 인 경우.
p#third-line {
}- a class 밑에 div 밑에 b 클래스 밑에 pre 클래스 밑에 span 태그에 적용이 되는 경우.
.a div .b .pre span {
background-color: yellow;
}7. selector 표현의 우선순위
-
inline styling (style 요소를 html 태그에 다이렉트로 내리꽃는 것)
: 1000점 드려요. -
ID 선택자
: 100점 -
class 선택자
: 10점 -
tag 선택자
: 1점
8. html 에 이미지를 넣는 두 가지 방법
8-1. img src 사용
크기를 width 나 height 하나만 입력해도 browser 에서 알아서 같은 비율로 나머지 크기도 줄여주거나 맞춰 준다.
8-2. background-image 사용
위 처럼 태그가 아닌 css 를 이용해 이미지를 생성하는 방법이다.
배경색 (background-color) 설정 시 가로크기는 화면 전체 이고 세로크기는 컨텐츠의 텍스트가 있다면 그 텍스트의 높이만큼의 height 를 가지고 있게 된다.
-
이 때, 텍스트를 지우게 된다면,
배경색이 아예 보이지 않게 될 것이다. -
div 의 높이와 너비를 지정해 주고
:css 에서 가로, 세로를 고정하면 그 크기만큼 영역을 차지하게 된다. -
이미지를 넣으니 원본크기대로 나와서 div 사이즈만큼 줄이려 시도하게 될 것이다.
: 이 때, background-size: 100%; 로 설정해 주면 원하는 모습을 볼 수 있게 된다.
9. block, inline 태그 요소들
블록 요소를 가진 태그들도 (가령 p 태그 같은) display 속성 inline 이나 inline-block 혹은 float 속성을 적용하면 span 과 똑같은 디자인이 된다.
반대로 inline 의 성질을 가지고 있는 태그를 display: block; 으로 바꾸어 적용할 수 있다.
10. margin 또는 padding 의 속성값을 줄 때
- 마진의 값 px 이 4개가 표시될 때 : 상 우 하 좌 순서임.
- 마진의 값 px 이 2개가 표시될 때 : 상하 좌우
- 마진의 값 px 이 1개가 표시될 때 : 상하좌우를 값 하나로 표시 가능.
11. 가상셀렉터의 사용
selector: first-child {}
selector: last-child {}
selector: nth-child(odd) {}
selector: nth-child(even) {}
input::placeholder {}
input[type="text]{}
input[type="text]::placeholder{}
hover 기능도 함께 사용 가능.12. 표(table) 에서의 유의할 점
colspan, rowspan 을 어떻게 적용하는지 기억하고 저 둘 중 하나를 적용할 시 다음에 오는 td 열의 요소 혹은 행의 요소들은 입력할 필요가, 아니 입력을 하면 아니 된다.
13. div 의 사용.
레이아웃에 있어 div 는 구획을 나누는 데 위주로 빈번하게 사용된다.
input, textarea, button 은 모두 inline element 이다. 한 줄에 몽땅 이어서 나오니까 각각 div 로 묶어 영역을 분리하고는 한다.
14. input 요소의 가로 width 값 통일시키기
예를 들어 input type text 요소와 textarea 의 가로 값을 동일하게 하고 싶은데, 기본값으로 볼 때는 제각각이다.
이때 어떻게 가로 값을 부여할까? 여기엔 두 가지 방법이 있다.
-
일일이 같은 width 값을 부여
: 비효율 적이다. -
부모 요소에 width 주고 (예: 200px) input, textarea 의 width 를 100% 로 설정하기.
: 두번째 방법이 효율 적이다.
15. position 의 4가지 속성
static 은 기본값이므로 일단 논외로 하고,
top, right, bottom, left 프로퍼티가 있어야 한다. 마이너스 값을 통해 반대로 값을 줄 수도 있다.
- absolute : 절대적인 위치에 둘 수 있다.
부모 즉, 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position 이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로 absolute 를 쓸 경우, 절대적으로 움직이고 싶은 부모에게
position: relative; 를 부여한다.
