다시 한 번 되새기고 싶은 css 기초

Kim-DaHam·2023년 2월 15일
&&
0

CSS

목록 보기
1/4
post-thumbnail

🟩 CSS

HTML 문서에 심미성을 높이고 더 높은 사용자 경험(UX; User Experience)를 제공한다.

🟩 사용자 인터페이스

인터페이스란?

서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 공유 경계.
사용자 인터페이스란? 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템

과거에 사용 되던 CLI 인터페이스는 사용자 인터페이스라고 할 수 없다.
CSS를 사용하여 사용자 경험을 고려한 UI를 제작해보자.

🟩 CSS 기초

🟣 CSS 파일 추가

<link rel="stylesheet" href="index.css">

rel : 연결하고자 하는 파일의 역할이나 특징
href : 파일의 위치

🟣 절대 단위와 상대 단위

절대단위 : px, pt 등
상대단위 : %, em, rem, ch, vw, vh 등

⬜ 글꼴 사이즈를 정할 때

🔴 상대 단위( rem 추천 )를 쓰자
px 과 같은 절대 단위, 즉 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기를 사용할 경우 사용자가 브라우저의 기본 글꼴 크기를 크게 설정하더라도 항상 고정되어 나타난다. 또한, 고해상도에서는 1px이 모니터의 한 점보다 크게 upscale 되기 때문에 흐릿하게 출력된다.

⬜ 화면 사이즈를 정할 때

🔵 반응형 웹(responsive web)에서 기준점을 만들 때
디바이스 크기를 나누는 기준을 보통 px로 정한다.

🔵 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
vw vh를 사용한다. 1vw는 보이는 영역 너비의 1/100.
스크롤 영역을 포함한 보이는 영역 전체 크기는 100vw, 100vh



🟣 박스 모델 (margin)

⬜ 바깥 여백 크기 지정

margin: 10px 20px 30px 40px; : 상 우 하 좌

margin: 10px 20px; : 상하 10px, 좌우 20px

⬜ 바깥 여백은 음수값이 가능

p {
    margin-to: -2rem;
}

여백에 음수 값을 지정하면 다른 엘리먼트와 간격이 줄어든다. 요소 간 겹치게 하거나, 화면(viewport)에서 벗어나게 만들 수 있다.

🌠 화면 바깥에 위치한 요소가 뷰포트 안으로 들어오게 하면서 특정 애니메이션을 구현할 수 있다
(ex. 코드스테이츠 메인 홈화면 '수료생이 취업한 기업들' 무한반복 슬라이드)


⬜ 박스를 벗어나는 콘텐츠 처리

박스 크기 < 콘텐츠 크기 인 경우 콘텐츠가 박스를 넘치게 된다.

단순 width/height 값으로만 박스와 콘텐츠의 크기를 비교하는 게 아니라 각각의 요소에 margin/padding 값을 적용한 크기도 반영해야 한다.

이때 사용하는 것이 border-box 이다. 이는 box-sizing 속성에서 결정할 수 있다.

  • content-box : 기본값. 오직 콘텐츠 크기만 측정(여백x). margin/padding을 포함한 실제 차지하는 너비는 다름.

  • border-box : margin/padding 크기를 모두 포함한 실제 차지하는 너비 == width


* { box-sizing: border-box } 스타일을 제거하면 안쪽 box가 바깥 box를 넘친다.

두 box의 크기를 동일하게 설정해보자. border를 적용하지 않으면 완전히 겹치는 것처럼 보이나 border를 적용하면 테두리가 넘친다. 그냥 늘 습관화 하여 box-sizing: border-box를 적용하는 게 좋겠다.



🟣 width/height

width, height 값을 사용하다 보면 종종 헷갈릴 때가 있다.
100%, auto... 무엇을 기준으로 100%라는 거고, auto라는 걸까?
정확히 파악해두지 않으면 시간을 잡아먹는 요인이 된다.

⬜ auto

width와 height의 기본값.
하지만 inline-block 요소와 block 요소에서 의미하는 auto가 다르다.

  • < inline-block 요소에서 auto란 >

    ⭐ 자식 요소들 크기에 자동 맞춤 (여기서 크기란, margin+border+padding+width 합친 것)

  • < block 요소에서 auto란 >

    ⭐ height: auto는 inline-block과 마찬가지로 자식 요소 크기를 기준으로 설정.
    ⭐ width: auto는 부모 요소 크기를 기준으로 설정. 단, width:100%와는 다르다. 정확히는 width=100% - margin(좌/우) 이다.

⬜ 100%

  • < inline-block 요소에서 100%란 >

    ⭐부모 요소의 크기를 기준으로 크기를 설정한다. 이는 block 요소도 마찬가지다.

🌠 checkpoint : 부모 요소가 height:auto이면, 자식요소의 top: %은 사용할 수 없다.

=> 부모 요소의 height == 자식 요소의 height 이기 때문에, 부모 크기를 기준으로 %를 사용하여 위치를 이동할 수 없다. 자리가 없다고 보면 된다.
하지만 절대 단위인 px을 사용하면 부모의 크기에 상관 없이 움직일 수 있다.

아래 참고를 확인하면 더 자세한 예시를 볼 수 있다.
🎁참고 : https://oursmalljoy.com/css-width-auto-height-auto-%EA%B8%B0%EB%B3%B8%EA%B0%9C%EB%85%90-%EC%9E%98%EB%AA%BB-%EC%83%9D%EA%B0%81%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94-%EA%B2%83%EB%93%A4/



🟣 Selector

id 셀렉터

#only { }

class 셀렉터

.widget { }
.center { }

attribute 셀렉터

같은 속성을 가진 요소를 선택한다. 

a[href] { } /* href 속성을 가진 <a> 선택 */
p[id="only"] { } /* id가 only인 <p> 선택 */
p[id~="out"] { } /* id에 out이 들어가는 <p> 선택. 공백으로 분리되어 있어야 함 */
p[class|="out"] { } /* class가 out이거나, out-으로 시작되는 <p> 선택 */
section[id^="sect"] { } /* id가 sect로 시작하는 <section> 선택 */
div[class$="2"] { } /* class가 2로 끝나는 <div> 선택 */
div[class*="w"] { } /* class에 w가 포함되는 <div> 선택 */

자식/후손/형제 셀렉터

  • 자식 셀렉터

    첫 번째로 입력한 요소의 바로 아래 자식 요소 선택 (자식의 자식은 선택x)
header > p { }
<header>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
</header>

  • 후손 셀렉터

    첫 번째로 입력한 요소의 자식의 자식까지 선택
header div { }
<header>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
</header>

  • 형제 셀렉터

    같은 부모를 가지면서, 두 번째 입력한 요소를 모두 선택
section ~ p { }
<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

  • 인접 형제 셀렉터

    같은 부모를 가지면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
section + p { } 
<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 셀렉터

  • 가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

  • UI 요소 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. 뒤에 오는 span요소에 적용*/
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. 위와 동일*/
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. 위와 동일*/

  • 구조 가상 클래스 셀렉터

p:first-child { } /*자식들 중, 첫 번째로 등장하는 <p> 선택*/
ul > li:last-child { } /*자식들 중, 마지막으로 등장하는 <p> 선택*/
ul > li:nth-child(2n) { } /*자식들 중, 앞에서 짝수 번째 위치하는 <li> 선택*/
section > p:nth-child(2n+1) { } /*자식들 중, 앞에서 홀수 번째 위치하는 <li> 선택*/
section > p:nth-last-child(2n + 1) { } /*자식들 중, 뒤에서부터 홀수 번째 위치하는 <p> 선택*/
p:first-of-type { } /*첫 번째 등장하는 <p>*/
div:last-of-type { } /*마지막 등장하는 <div>*/
ul:nth-of-type(2) { } /*앞에서 2번째 등장하는 <ul>*/
p:nth-last-of-type(1) { } /*뒤에서 1번째 등장하는 <p>*/

nth 정리

  • 부정 셀렉터

input:not([type="password"]) { } /*type="password"에 해당하지 않는 input 선택*/
div:not(:nth-of-type(2)) { } /*앞에서 2번째 등장하는 div를 제외한 div 선택*/

  • 정합성 확인 셀렉터

input[type="text"]:valid { } /*정합성 검증이 성공한 <input> 선택*/
form[type="text"]:invalid { } /*정합성 검증이 실패한 <form> 선택*/

  • 가상 요소 셀렉터

h1::first-letter { } /*h1의 첫 글자 선택*/
div::first-line { } /*div의 첫 줄 선택. 블록 요소만 가능.*/
h1::after { } /*h1의 뒤에 위치하는 공간 선택*/
h1::before { } /*h1의 앞에 위치하는 공간 선택*/
::selection { } /*드래그한 콘텐츠 선택*/


직접 쓰고 테스트 하면서 기억하려고 적어봤지만 아래 참고 블로그가 훨 깔끔하게 보기 좋다 :)
[참고-실무에서 자주 쓰는 필수 css 선택자 ] https://leeproblog.tistory.com/m/86



📔 오늘의 후기

  1. id, class 명 정하느라 시간을 제일 많이 쓴다. 언제쯤 익숙해질까?
    [참고 - css 네이밍 규칙] https://uipac.com/451
  2. 아직도 디자인 감각이 영... 부족하다. 비율이 안 맞는다고 해야하나? 크기 기준을 하나 정해두면 좋겠다.
    [참고 - 애플, 구글 디자인 가이드라인] https://chaeyeon-chaeyeon.tistory.com/34
  3. gird냐 flex냐... 적재적소에 사용하는 법이 아직 미숙하다. 마침 내일 flex를 사용한 목업 과제가 있으니 공부할 기회는 넘쳐난다 :)
  4. css 셀렉터 은근 복잡하다. 웹개발을 배운 이래 한 번도 써보지 않은 셀렉터가 수두룩하다. 어떻게 적는 게 나+다른 개발자들이 보기 좋을까? 이럴 땐 누가 정말 딱 정해주면 좋겠다.
profile
Kim-DaHam
다 하자
다음 포스트

CSS에서 제일 유용한 정렬 Flexbox

0개의 댓글