Css 스터디

작홍분·2022년 9월 28일

CSS frontend

HTML CSS

목록 보기

1/3

CSS 적용 방법

1. inline style - HTML 태그마다 style 속성으로 CSS 코드를 넣을 때

internal style sheet

head 태그 안에 style 태그 안에 CSS 코드를 넣을 때

linking style sheet

외부의 CSS 파일을 HTML 문서에 연결.

선택자

CSS selector game

몇가지 헷갈리는 것들 정리

lv.13

selecting every apple that's next to a plate

plate+apple ### plate 뒤에 붙는 apple을 선택해 줘

이 방법도 있다.

plate+

여기서, apple:nth-of-type(1)를 하게 되면, 첫번째 apple type 인 .small인 앞 두개의 사과가 select됨.
apple:nth-of-type(2)를 하게 되면, 두번쨰 apple type인 세번째 사과가 select됨.

lv.16

selecting the apple and the pickle on the plates

plate>: only-child ###plate 위에 있는 유일한 자쉭들

다른 방법

plate apple , plate pickle
plate>apple, plate>pickle
apple,plate>pickle:first-child

lv.19

bento:nth-last-child(3)

세번째 자손인 벤토

글자와 텍스트 스타일

font-style, font-weight

 font-style: normal/italic;
 font-weight: normal/bold/100~900;
 font-size: ~px, ~%, ~em, ~rem, vw, vh
 text-decoration: none/underline/underline dotted/underline dotted red;
 text-shadow:x좌표, y좌표,흐림,색 ###google css shadow generator
}

difference between em &rem?

em vs. rem EXPLAINED

em은 부모 요소의 font-size 속성값을 기준으로 한 상대적 크기를 나타냄. 자식의 크기가 1em 이면, 부모 요소의 크기와 동일함.
rem(root) 은 html 요소의 font-size 속성값을 기준으로 한 상대적인 크기를 가지게 된다.
~~웬만하면 rem을 사용. 왜냐하면 em 사용시 부모의 부모로부터..겹겹이 상속받는 CSS 파일에서 사이징을 할 때 헷갈림.~~

문단과 목록 스타일

p{
text-align:left/right/center/justify;
letter-spacing:~px/~em/~rem;
word-spacing:~px/~em/~rem;
line-height:~px/~em/~rem;
text-indent:~px/~em/~rem;
color:red;
background-color: #123;
}

ul{
list-style:circle/"-"/"emoji"/lower-alpha;
}

display값 설정

block : 부모의 너비 만큼의 너비를 가짐. 한줄을 통째로 먹음,블록의 width, height를 지정할 수 있고, margin, padding을 모두 적용 할 수 있다.
inline : 컨텐츠의 크기만큼 너비를 가짐.
inline-block : 컨텐츠의 크기만큼 너비를 가지지만, 블록의 width, height를 지정할 수 있고, margin, padding을 모두 적용 할 수 있다.

margin vs padding?

1. margin : 요소의 경계 주변을 둘러싼 공간 2. padding: 요소의 컨텐츠와 경계 사이의 공간

박스 모델

width, height로 크기를 조절할 수 있다.
단위는 %, vw, vhh, vmax, vmin이 사용된다.

vmax, vmin?
현재 화면의 긴쪽이 max, 짧은쪽이 min 이것을 기준으로 상대적인 길이 지정.

박스안의 text의 height과 line-height를 동일하게 맞추면, 가운데 정렬처럼 보인다. (단, 한 줄일 때만 가능)

calc(100%-50px)처럼 필요에 맞는 수치를 계산할 수 있다.

div{
border:2px solid black;
border-radius: 2em;
box-sizing:content-box/border-box; 
###너비와 높이 값에 padding과 border값을 포함시킬지 말지. 포함 시키지 않는다 :content-box, 포함 시킨다. : border-box
overflow:auto/visible/hidden/scroll
} 
### 부모 요소보다 자식 요소가 더 클 때 
### auto :스크롤 바가 뜨고, 스크롤 조정 가능
/visible : 부모요소를 초월해 보여줌
/hidden: 부모요소 만큼만 보여줌. 

box-shadow : 박스에 그림자를 줄 수 있음. 
background-image: url(./images/~~~);

absolute: 가까운 위치 지정 조상(즉, static이 아닌 가장 가까운 조상)을 기준으로 배치됩니다
fixed: 컨테이닝 블록을 기준으로 삼아 배치함.

position

## static - attribute 인 position을 따로 지정하지 않으면, static 이 기본값으로 적용된다. - position:static 인 요소는 HTML 에 작성된 그대로 화면에 표시가 된다.

relative

요소를 원래 위치를 기준으로, 상대적으로 배치해준다.
top: / bottom: / left: / right:
속성을 이용하여, 원래위치로부터 상대적으로 얼마나 떨어진 위치에 배치할지를 설정할 수 있다.

absolute

position:absolute 인 요소는 배치 기준을 자신의 부모들 중 static 이 아닌 (relative, absolute, fixed ..etc) position 속성을 갖는 요소를 기준으로 위치를 잡는다.
다만, 일반적으로, 어떤 요소의 position 이 absolute 라면, 부모요소의 속성을 relative로 설정하는 것이 관례이다.
absolute 속성을 갖는 요소는, 더 이상 html 문서상의 요소들의 흐름에 개입하지 않는다.

fixed

position:fixed 인 요소는 브라우저 전체화면의 뷰포트 기준 으로 고정된 좌표값을 부여한다.
absolute와 마찬가지로, 더 이상 html 문서상의 요소들의 흐름에 개입하지 않는다.
스크롤 내리면 따라 올라가지 않고, 항상 고정된 좌표를 유지한다.

sticky

화면을 스크롤할 때 효과가 나타난다.
적용된 요소가 스크롤을 내릴 때 일정 수준에서 화면에 붙어서 움직이지않는다.

요소 감추기

1단계 : opacity:0 ;
-> 모습만 감춘다.
2단계 : visibility:hidden;
-> 마우스 오버 효과나, 포커스, 클릭등도 안됨. 스크린 리더도 못읽음.
3단계 : display:none;
-> 아예 자리조차 차지 하지 않음.

작홍분

다음 포스트