TIL 210726 - CSS

끼야호!!

한번 신명나게 오늘의 하루를 시작하고 싶어서 이렇게 외쳐보았다.

 

주말에 시간을 쪼개서 코플릿을 풀었고

드디어 반복문의 2문제만 남았다.

정말 풀어내는 거

그 안에 돌아가는 로직을 짜는 거이 쉽지 않은데

그래도 느리지만 천천히 가고 있다.

 

누군가가 그러더라

프로그래밍이 어려운게 아니라

익숙치 않아서 그런거라고

알고리즘도 결국 익숙해지면 

편안한 상태로 임할 수 있을 거라고

생각한다.

 

자 오늘은 CSS다!!!

Cascading Style Sheet

자 배워봅시다.!! 골 체크

 

CSS 시작!!!

Achievement Goals

• CSS의 사용목적을 이해할 수 있다.
• 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
• CSS의 기본 문법과 구조를 이해할 수 있다.
• CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
  • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
• id 및 class와 관련된 selector 규칙을 이해할 수 있다.
• CSS를 이용해 텍스트를 꾸밀 수 있다
• CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
  • 각 단위가 적합한 경우를 구분할 수 있다.
• CSS 박스 모델을 이해할 수 있다
  • box model
    • width, height
    • margin, padding, border
  • 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
• MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.

 

Chapter 1  - CSS 기초

가기 전에 체크하실께요~

HTML 순서예요.

 

Html

 

Head: title, charset,style  --> 오호 style sheet가 여기 존재하겠군 좋아!!

 

Body : 여기에는 javascirpt가 들어가겠군! 좋아!

 

프론트엔드 개발자에 필요한 CSS 기술

• 화면의 구성이나 배치 (레이아웃 디자인)
• 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

플러스 알파!

• 정렬이나 배색에 대한 감각
• UX에 대하여 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해본 경험

CSS 문법 구성

선택자, 선언블록, 선언, 속성, 값 오키!

 

selector : 태크, ID, 클래스 선택

 

• 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요? text-align: center
• 글자 색을 바꾸기 위한 속성은 무엇인가요? color
• 배경 색을 바꾸기 위한 속성은 무엇인가요? background-color
• background 속성과 background-color 속성은 어떻게 다른가요? 색상, 이미지, 크기 등 여러 배경 스타일 한번에 지정
• em의 의미는 무엇인가요? em 단위는 상위 요소 크기의 몇 배인지로 크기를 설정, 예) font-size: 1.5em;은 글자 크기를 상위 요소 크기의 1.5로 하겠다는 뜻

 

HTML 파일에서 CSS적용할 파일을 불러오는 코드는 아래와 같다.

<link href="mystyle.css" type="text/css" rel="stylesheet">

 

href, type, rel 속성 설명

(1) href는 hypertext ref는 reference

즉 웹브라우저에게 hypertext를 reference(참조)하라는 의미

href="mystyle.css" --> mystyle.css 파일 참조

 

(2) type은 minetype으로 해당 파일의 성격을 지정

type은 필수가 아니라 생략가능

text/css: text형식의/css파일을 의미

 

(3) rel속성은, 관계 즉 relation 이라는 뜻으로 연결관계라는 뜻

html에 stylesheet로 연결하라는 뜻

 

 

관심사 분리는

HTML 파일 내용안에 html 태그와

style태크를 한꺼번에 넣을 수 있지만

html에서는 웹 페이지의 구조만 신경쓰고,

CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하기 위해

html 파일 따로 css 파일 따로 작성한다.

 

 

CSS를 HTML에 적용하는 방식 3가지

1. 인라인 스타일 : 같은 줄에 스타일을 적용하는 방식

<nav style="background: #eee; color: blue">...</nav>

2. 내부 스타일 시트 : CSS 파일을 별도로 작성하지 않고, style 태그 내에 작성하는 방식

<style type='text/css>

h1{font-family:'굴림체'

font-size:30px; }

</style>

3. 외부 스타일 시트 : CSS 파일을 따로 작성하여 HTML내에서 link 하여 적용하는 방식

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

 

특정 영역을 id로 지정하여

CSS에서 해당 id를 지정하여 적용하열 수 있다.

id는 한문서에서 하나만 사용할 수 있다.

 

id = "navigation bar"

#navigation bar {

 

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

여러 <li> 요소에 동일한 class를 사용하면

동일한 스타일을 여러 엘리먼트에

적용할 수 있다.

위의 경우 CSS파일에서 .menu-item으로

class를 선택할 수 있다.

.menu-item {
   text-decoration: underline   
}

 

반대로 여러개의 class를 하나의 엘리먼트로 적용할 수도 있다.

여러 클래스를 하나의 엘리먼트로 적용하기 위해서는

적용하려는 클래스의 이름을 공백으로 분리한다.

<li class="menu-item selected">Home</li>

위의 코드에서 클래스를 nemu-item과 selected로 구분해서 

지정해 주었다.

 

마무리

* id와 class의 차이점을 반드시 기억하세요.

ID	CLASS
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

이상 CSS 강좌 chapter 1 CSS 기초

 

 

Chapter 2 텍스트 꾸미기

글자 색상, 배경 색상, 테두리 색상

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴 이름은 따옴표를 붙여서 설정

최초에 입력한 글꼴이 없는 경우를 대비해서 대체(fallback) 글꼴을 뒤에 입력해 놓을 수도 있음

입력한 순서대로 적용

 

일반적으로 글꼴은 사용자의 로컬 매체 저장되어 있어서 표현되는 것이다.

그런데 웹폰트 기술을 통해 사용자 로컬 매체에 글꼴 파일이 설치되어 있는지 여부에 상관없이

웹에서 항상 제공자가 원하는 글꼴이 볼 수 있게 하는 기술이다.

출처: https://d2.naver.com/helloworld/4969726

위의 코드처럼 글꼴이 저장되어 있는 서버 주소를 입력해서 글꼴을 적용한다.

 

글자 크기

.title {
  font-size: 24px;
}

글자 크기에서 중요한 것은

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

를 구분하는 것

 

중요한 내용은 가감없이 복붙!

 

MDN, w3schools 등에서 단위에 대한 더 많은 정보를 확인할 수 있습니다. 여기에서는 절대 단위와 상대 단위를 비교합니다. 그리고 언제, 어떤 단위를 써야하는지 안내합니다.

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
   • px(픽셀)을 사용합니다. px은 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리합니다. 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정됩니다. 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
2. 일반적인 경우
   • 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)
3. 반응형 웹(responsive web)에서 기준점을 만들 때
   • 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이 때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다. 이 때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해볼 수 있습니다.
4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
   • 이 때에는 vw, vh를 사용하세요. 웹사이트의 보여지는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

기타 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

 

Chapter 3 박스 모델

 

html문서의 레이아웃

h1, p, div 태그는 줄바꿈이 되는 태그 : 블록 레벌 엘리먼트

span 태그는 줄바꿈이 안되는 태그: 인라인 엘리먼트

인라인 엘리먼트는 width, height 속성이 적용되지 않음

 

block, inline-block, inline

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능여부	가능	가능	불가능

[표] block, inline-block, inline의 특징

 

 

CSS 박스 모델은 다음 그림만 기억하면 됩니다.

[그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.

 

테두리(border)

p {
  border: 1px solid red;
}

테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)

border-style mdn과 같이 구글에 검색

 

질문

• 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
• 테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다.
• 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다.

 

바깥 여백(margine)

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

각각의 값은 top, right, bottom, left로 시계방향

margin은 주황색으로 표현

 

p {
  margin: 10px 20px;
}

값을 두개만 넣으면 top과 bottom이 10px, left 및 right가 20px

 

p {
  margin: 10px;
}

값을 하나만 넣으면 모든 방향의 바깥 여백에 적용

 

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

margin의 위치를 특정해 여백을 추가

 

위의 규칙은 안쪽 여백(padding)에도 동일하게 적용

 

p {
  margin-top: -2rem;
}

바깥 여백에는 음수값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음. 잼나는 기능이네.

 

안쪽 여백(padding)

margine의 규칙과 동일하게 적용

padding은 초록색

 

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

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옴

p {
  height: 40px;
  overflow: auto;
}

p태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시

overflow 속성 hidden: 콘텐츠가 넘칠 경우 콘텐츠의 내용을 보여 주지 않는 것

overflow-x속성과 overflow-y속성을 지정하여 가로 방향으로 혹은 세로 방향으로

스크롤을 구현할 수 있음

 

박스크기 측정 기준

<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

위의 코드를 실행하면 아래처럼 나온다.

id가 container인 박스의 width 속성에 300px을 지정했습니다. 그러나 개발자도구로 확인한 해당 요소의 width 값은 324px 입니다. CSS에서 지정한 두 요소에 대해 아래와 같이 확인할 수 있습니다.

• #container의 너비는 300px이 아니라, 324px입니다. 브라우저는 다음과 같은 계산을 실행합니다. 
  300px (콘텐츠 영역) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right)
• #inner의 100%는 300px이 아니라, 364px입니다. 브라우저는 다음과 같은 계산을 실행합니다.
  300px (300px의 100%) + 30px (padding-left) + 30px (padding-right) + 2px (border-left) + 2px (border-right)

박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

 

* {
  box-sizing: border-box;
}

box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다.

 

content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.

 

CSS 끝!!!

 

점심먹자!

 

코플릿  시작

 

1) querySelector 과제 제출

 

자바스크립트 

document.querySelector("#hello").textContent="안녕하세요";

2) 계산기

• Achievement Goals
  • 스프린트에 작성된 HTML, CSS를 보며 복습할 수 있다.
  • HTML, CSS, JS로 두 숫자의 사칙연산을 할 수 있는 계산기를 만들 수 있다.
  • Github 웹 GUI를 이용해, Drag & Drop으로 과제를 제출할 수 있다.
  자바스크립트 2) 계산기소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항script 태그는 body태그의 제일 마지막에 온다.
• Bare Minimum Requirements
• document.querySelector("#hello").textContent="안녕하세요";

페어 분과 열틴 협의를 마치고 좀 더 생각해보기로 하였음

자습 시간에 성공적으로 작성하고 제출하였음