코딩응애의 개발블로그

코드스테이츠 6일차 - (CSS 기초) & 회고 본문

코드스테이츠(부트캠프)

코드스테이츠 6일차 - (CSS 기초) & 회고

이너멜 2022. 6. 30. 18:04

UI & UX(User eXperience)

일단 인터페이스는 컴퓨터와 교류하기 위한 연결고리라고 한다. 옛날에는 cli로 컴퓨터와 소통을 했어야 했는데 요즘은 잘 만들어진 인터페이스로 소통함 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여

사용자 인터페이스, UI라고 한다. 

UX는 처음 알게된건데 사용자 경험이라고 한다. 좋은 사용자의 경험은 직관적이고 쉬운 UI에서 나온다고 한다. 

 

<header>,<section>,<nav> 태그들은 여기 블로그에 있으니 찾아보기 

 

<main> => <main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.

<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다.

따라서 하나의 문서에는 단 하나의 <main> 요소만이 존재해야 하며, <main> 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안 됩니다.

출처: http://www.tcpschool.com/html-tags/main  

 

<aside> => <aside> 태그는 주요한 내용이 아닌 부차적인 내용을 담는 태그이다.

aside 요소는, article 요소 안쪽 또는 바깥 쪽에 올 수 있다.

article 태그 안쪽에 aisde가 있을 때는, aritcle의 본문 내용과 관련 있는 내용이어야 하고, -(1)

article 태그 바깥쪽에 aisde가 있을 때는, 전체 웹페이지와 관계 있는 내용이어야 한다. -(2)

(2) 같은 경우를 예로 들자면  블로그에서 흔히 볼 수 있는 사이드바의 메뉴를 생각하면 된다.

 

<footer> => footer는 웹페이지에서 하단 영역을 의미하고 footer 태그에는 회사의 정책, 주소, 전화번호, 저작권 표시 마크,

고객센터 정보, 사이트맵 등이 위치한다. 

footer는 문서 끝에 오는 경우가 많지만 꼭 끝에 올 필요는 없다

참조: http://www.tcpschool.com/html-tags/footer   

 

절대단위 상대단위 

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

글꼴 사이즈 정할때 기기나 브라우저 사이즈 환경에 영향을 받지 않는게 절대단위 인데 px ,pt가 그 예시다 

절대적인 크기로 정할때, 반응형 웹에서 기준점을 만들때 픽셀을 이용하고

화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw(viewport width), vh(viewport height) 이용한다. 

100vh,100vw가 전체 화면의 기준이 된다. 예를 들어서 height가 500px , width=800px 이라면

1vh=5px, 1vw=8px 이 되는것임.

 

100% 과 100vh는 차이점이 무엇일까?

vh 는 width 에서도 사용이 가능 vh는 뷰포트를 기준 즉 보여지는 영역에서 얼마만큼 차지할 것인지 지정하는 단위이다.

뷰포트 높이를 꽉 채우는 섹션이 있는 페이지를 만든다고 해봅시다.
 ★중요 이때, height: 100%를 지정하려면 부모에게도 height: 100%을 지정해야 합니다. 그래야 상속받아서 쓸 수 있어요.

반면, height: 100vh를 지정하면 부모의 높이에 무관하게 전체 영역을 차지합니다.

vh는 부모가 아닌, 뷰포트를 기준으로 한 단위니까요! ★

출처: https://nykim.work/85    (22.07.04 내용 추가)

 

일반적인 경우에는 rem을 추천 한다고 함 

em & rem => 글꼴 사이즈를 정할때 사용함 상위 요소 크기의 몇 배로 키울지 크기를 정함 예를 들어서 

<style>
      html { font-size: 16px; }
      body { font-size: 1.5em; }
    </style>

이렇게 하면 body 요소 크기는 상위 요소인 html 크기의 1.5배인 24px이 되는것이다 

rem 은 문서의 최상위 요소 즉 html 요소의 크기를 기준으로 몇배의 크기로 할지 정하는것 예를들어서 

<style>
      html { font-size: 16px; }
      .a { font-size: 2.0rem; }
    </style>

html이 16px 이니까 a 태그의 글자 크기는 2배인 32px이 되는것이다. 

 

block,inline,inline-block 은 다른 포스트에 정리를 해두었음 

 

위에 정리하면서 계속 거슬리면서 궁금했던 점 요소는 뭐고 태그는 뭘까? 둘이 같은거 아닌가? 하고 검색해보니 아니랜다;

태그는 요소의 시작과 끝을 알리는 문법 기호고 요소의 부분 집합이라고 하고 요소는 웹 페이지를 구성하는 성분이라고 하는데

그림으로 보자면 

태그와 요소 둘은 다른것을 알 수 있다. 출처: https://www.snugarchive.com/blog/html-tags-vs-elements/    

 

margin 

바깥 여백이라고 하는데 그냥 구글에 검색해보면 어딘지 정확히 알수 있음. 

p {
  margin: 10px 20px 30px 40px;
}

각각 상 우 하 좌 그냥 쉽게 위에서 부터 시계방향이라고 생각하면 편하다. 저 크기 만큼 여백을 추가해주는 것이다.

p {
  margin: 10px 20px;
}

만약 2개 값만 넣으면 상 하 10px 좌우 20px 여백을 추가한다는 의미이다. 그리고 값을 하나만 넣으면 모든 방향의 여백에 적용됨.

상하좌우 다 다른값을 넣어 줄 수 도있다. 이런식으로 padding도 마찬가지 

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

overflow 

박스 크기보다 콘텐츠 크기가 클때 콘텐츠가 박스 바깥으로 빠져나와서 그것을 어떻게 보여줄지를 지정한다.

기본값은 visible 이고 hidden, scroll, auto 값들이 있다. 

overflow : visible 일때 넘친 컨텐츠는 박스 밖에까지 보임 오른쪽은 hidden 넘친 컨텐츠는 잘리고 안보임 
scroll 일때 넘친 컨텐츠는 잘리고, 스크롤바가 생겨서 스크롤해서 볼 수 있다. 가로/세로 스크롤바가 모두 생김. 왼쪽은 auto 일때 컨텐츠가 넘칠경우 스크롤바가 자동으로 생긴다 scroll과는 달리 가로와 세로중 필요한 부분에만 생긴다.

그리고 가로,세로 각각 제어하고자 한다면 overflow-x 와 overflow-y를 사용을 한다. 

 

box-sizing : border-box 는 다른 포스트에 정리를 해둔게 있으니 참고할것 

 

선택자 

자식 셀렉터 & 후손 셀렉터 

이름만 보면 그게 그거 아닌가 싶은 선택자들인데 조금 다르다. 자식은 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 

header > p { } // 이렇게 쓰임
<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header> 
// span 태그 안에 자식인 p 요소는 선택이 되지 않음

후손은 많이 익숙한 선택자인데 오늘 이름을 첨 알긴 함 어쨋든 첫 번째로 입력한 요소의 후손을 선택한다 .

header p {} // 이렇게 씀 익숙하지?
<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header> 
// header 안에 p 요소들은 다 선택을 한다

그 외에 선택자들이 더 있긴 한데 음.. 

 

회고

오늘은 CSS를 배웠다. 확실히 한동안 놓고 있다가 배우니까 기본적인 개념들도 헷갈렷다. 이렇게 정리하면서 

공부해야겠다. 수많은 선택자들을 배웠는데 과연 이런 선택자들을 쓸까? 하는 생각을 했는데 역시나 실시간 세션 때 거의 안쓰긴 하지만 아예 안쓰진 않는다곤 하는데 그게 그거 아님? ㅋㅋ 오늘 생활코딩 CSS 다 들을려고 했는데 

우분투 팬 돌아가는것 때문에 계속 검색해서 해결할려다가 진이 다 빠져서 내일 일어나서 수업 시작하기 전에 다 들을 예정이다. 우분투 때문에 요새 스트레스 받음. 왜 윈도우 보다 편하다는 걸까... 아직 이해는 가진 않는다.

내일이면 일주일 째인데 시간이 천천히 가는듯 싶다. 확실히 일찍 일어나니까 그런것 같기도.. 

집에서 뒹굴뒹굴 거릴때는 시간이 배속한거 마냥 지나갔었는데 참.. 내일은 페어프로그래밍이 있다 

좋은 사람 만났으면 싶다 

저작자표시 비영리 변경금지

'코드스테이츠(부트캠프)' 카테고리의 다른 글

코드스테이츠 10일차 - ([Linux/Git] 기초) & 회고  (0) 2022.07.06
코드스테이츠 7일차 - ([HTML/CSS] 활용) & 회고  (0) 2022.07.02
코드스테이츠 5일차 - (html 기초) & 회고  (0) 2022.06.29
코드스테이츠 4일차 - ( JS. 반복문) & 회고  (0) 2022.06.28
코드스테이츠 3일차 - ( JS. 조건문, 문자열) & 회고  (0) 2022.06.27
'코드스테이츠(부트캠프)' Related Articles more
Comments