ho_IT.log

Frontend School 09.14

Wed, 14 Sep 2022 01:29:41 GMT

CSS / CSS 특강

🔔 CSS

Text

1. line-height

- 글자 라인의 높이를 지정하여 텍스트 라인과 라인 사이의 간격(leading)을 조정할 때 사용 - normal : 기본 값 / 폰트의 font-family 에 따른 글자의 기본 높이 /사용하는 font-family에 따라 기본 line-height 값이 다르다는것에 유의 - number : 숫자로 값을 설정할 수 있음 / 1은 font-size 값 만큼의 라인 높이를 의미/ 2는 font-size 값의 두 배를 의미 / 소수점을 지원
2. letter-spacing - 글자 사이의 간격을 조절
3. text-align left : 기본값으로 텍스트를 왼쪽에 정렬 right : 텍스트를 오른쪽에 정렬 center : 텍스트를 가운데에 정렬 justify : 마지막 라인을 제외하고 텍스트를 양쪽 끝으로 정렬
4. vertical-align - 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성 -** baseline** : 베이스라인을 부모의 베이스 라인에 맞추어 정렬합 -** top** : 상단의 위치를 라인(인라인 박스를 감싸고 있는 공간)의 상단으로 정렬 - bottom : 하단의 위치를 전체 라인의 하단으로 정렬

5. text-decoration - 텍스트에 붙는 라인을 꾸며주는 속성 - 텍스트의 상단 & 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있음 - 글씨의 font-family, 텍스트의 형태에 따라 라인이 잘리는 경우가 있기 때문에 스타일링의 용도로는 잘 사용하지 않음 - 대신 태그의 기본 스타일을 제거할때 가장 자주 쓰이는 속성

    a {
      text-decoration:none;
    }

6. text-overflow - 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성

- text-overflow 속성은 그 자체만으로 넘친 컨텐츠를 만들어서 처리하지 않음 컨테이너에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 함

postion

HTML 태그의 위치를 지정해주는 속성

position : static - 기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가짐 - html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정
position : relative - 원래 자신이 있어야 하는 위치에 상대적/ 자신이 원래 있던 자리를 기억
position : absolute - static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됨
position : fixed - 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치
position : sticky - 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙음
z-index - 어떤 요소가 더 위로 나타나게 할지 결정할때 사용 - static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됨 - 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능 - 보통 10단위로 많이 사용 / 음수도 가능 - 부모가 다른 부모에게 이미 졌으면 자식은 절대 못 이긴다.

Float

'띄우다'라는 뜻 / 요소를 띄워서 좌 or 우로 정렬을 하는 속성을 가짐

그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성

*왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 아래 코드와 같이 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다. *

float:left, float:right - float 속성의 left 값은 요소를 왼쪽으로, right 값은 오른쪽으로 정렬
과 같은 inline 요소에 float 속성을 적용하면 display 속성값이 자동으로 block 으로 바뀜 / 때문에 float 속성이 적용되면 inline 요소도 width, height, margin, padding 속성값 사용 가능
자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못함 / 자식한테 float 속성을 설정하면 자식 요소들은 붕 띄워진 상태(floating)이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못함

※ 해결방법

** 1. 부모 요소에 overflow 속성을 추가**

overflow은 Block-Formatting-Context(BFC)를 생성 / BFC는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어줌 / 때문에 컨테이너 요소에 overflow:hidden; 혹은 overflow:scroll; 등 overflow:visible;을 제외한 overflow 속성을 추가하여 해결

- BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

** 2. 부모 요소의 높이 값을 직접 지정**

비효율적

** 3. clear 속성 사용**

float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용 / clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용

오직 float을 해제 하기위해서만 존재 / 주로 clear: both 사용

🔔 CSS 특강

line-height

https://www.w3.org/TR/css-inline-3/

- 텍스트를 더 읽기 쉽게 만들기 위해 납(lead) 조각을 넣어 구분한 것에서 leading 유래

- CSS에서는 leading을 반으로 나누어 상하단에 half-leading으로 사용

- line-height = (Half Lead * 2) + font-size

- font-family에 따라 line-height 다르다 / 폰트 만든 사람이 정한 것

- CSS / leading-trim 준비중

negative margin

- 마진에 음수 값 설정 - 이미지는 inline-block으로 보는 것이 현명 - 마진 겹침은 블록과 블록 사이에서만 발생 - 마진을 마이너스로 쓸 수 있다는 것은 스펙이다 / 남용은 하지 말자

.poketmon img {
    background-color: orange;
    margin-top: -50px;
    margin-bottom: -50px;
}

.poketmon img {
    margin-top: -200px;
}

🔔 마무리

✅ 폰트가 어떤 세계관을 가지고 있는지 정확하게 이해할 필요가 있음 ✅ 구두 디자이너가 해부학까지 공부했다 / 디자이너 + 코딩 / 고급인력 ✅ 작업순서를 잘 고려해라 / 코드 품질에 영향 ✅ 클래스를 어떻게 작명하면 행복할 것이냐

Frontend School 09.13

Mon, 12 Sep 2022 14:06:44 GMT

🔔 CSS

** Alternative CSS Box Model**

표준 CSS 박스모델에서 요소의 전체적인 크기
= 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값

contents-box : 기본 값 / contents 영역에 width, height 적용

border-box : border 영역까지 width, height 적용 / 따라서 padding or border의 폭이 요소의 width나 heigth를 늘릴 수 없다

** CSS declarations**

단위

절대 길이 단위 - 사용자가 선언한 고정된 크기 그대로를 화면에 그리기 때문에 직관적으로 쉽게 사용 - cm, mm, px 등

상대 길이 단위 - em : 요소의 font-size에 따라 기준점을 세우며 기준점에 따라 크기가 달라진다 : 요소에 글자 크기가 지정되어 있지 않다면, 폰트 사이즈를 상속 받는 요소의 경우 부모 요소의 글자 크기를 기준으로 : 상속받지 않는 요소의 경우(ex.

CSS 알아보기

Thu, 08 Sep 2022 14:43:19 GMT

🔔 CSS

1) CSS 란?

HTML이 웹의 뼈대 / CSS는 HTML을 꾸며주는 가죽, 피부에 해당
Cascading Style Sheets
- Cascading : 폭포가 되어 떨어지다 / CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용 / 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양
- Style Sheets : 웹 페이지의 스타일을 정리해둔 문서

2) 기본 구조


p {
    font-size: 20px;
    color: red;   
}

p : Selector
font-size / color : property
20px; / red; : value

3) RESET CSS

브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 다름 따라서 해결 방법들이 등장
- 에릭 마이어의 reset CSS / 2011년 이후 업데이트 중단 https://meyerweb.com/eric/tools/css/reset/
- normalize.css / 브라우저 고유의 스타일을 존중하면서 거기에 스타일을 첨가 https://necolas.github.io/normalize.css/
- CSS Remedy / 차세대 CSS reset 프로젝트 https://github.com/jensimmons/cssremedy

4) Vendor-Prefix

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어
아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법을 의미
종류 : -webkit- -moz- -ms- -o-

자동화 : https://autoprefixer.github.io/

5) CSS Selector

1. 전체 선택자 (Universal Selector)

* {
    margin: 0 auto;
}

전체 선택자를 통해서 모든 HTML 요소에 접근

2. 타입 선택자 (Type Selector)

h1 {
    color: red;
}

해당 태그의 이름에 해당하는 모든 태그에 속성을 적용

3. 아이디 선택자 (ID Selector)


  
  id
  


  이 문단은 green id를 부여하였습니다.

페이지에 있는 해당 요소를 유일하게 식별할 때 사용
같은 페이지 안에 id 값은 유일해야 함
id 이름을 최대한 직관적이고 간단명료하게 지어주는 것도 중요
태그의 href 속성과 연결하여 다른 페이지로 이동하는 링크가 아닌 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있다

4. 클래스 선택자 (Class Selector)

.green { 
        color: green;     
}

class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있음
직관적이고 간단명료하게 적어주는 것이 중요
중복이 가능하다는 특징 때문에 유니크한 class를 생성하여 자주 쓰는 스타일을 정의해두고 재사용하는것이 가능

5. 선택자 목록 (Selector list)

h1, h2, h3, h4, h5, h6 {color: red;}

콤마(,) 로 선택자를 연결하여 일치하는 모든 요소를 선택

6) 선택자 우선순위

** 1. 후자 우선의 원칙**

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선 / 덮어씌워진다

2. Specificity (명시도, 구체성)

한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선 / 가중치를 기준으로 판단 가중치 : id > class > 타입 순으로 style 적용

브라우저 입장에서 가장 가치 있는 정보가 무엇일까?

메달로 생각해보자. / (금, 은, 동)

(0, 1, 0)이 (0, 0, 2)보다 우선순위

동점이면 나중에 코딩 된 것이 우선순위 https://specifishity.com/

3. 중요성의 원칙

다른 속성보다 더 우선적으로 적용되어야할 중요한 스타일 속성이 있다면 !important 를 속성값 다음에 추가
가중치 점수를 무시하고 무조건적인 우선 순위를 가진다
지양

🔔 마무리

디자인을 위한 이미지에는 보통 대체텍스트를 사용하지 않는다 / 사용자에게 무조건 많은 정보를 제공하기보다는, 이 이미지가 사용자에게 필요한 정보인가? 하고 판단하는 자세가 필요
혼란한 상태에서 자리를 지키고 있다는 것만으로도 잘하고 있는 것
과정이 목적 자체가 되는 것

HTML & CSS 특강

Wed, 07 Sep 2022 14:10:16 GMT

🔔 HTML

1) Forms

- 정보를 입력하는 영역
- 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송 / 전송한 데이터는 웹 서버가 처리 / 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송
  - action : 어디에 보낼 건지?
  - method : 어떻게 보낼 건지?
- 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줌 / 사용자에게 정보를 입력 받음
- 속성 : type / name / readonly / maxlength / minlength / required / autofocus / placeholder / pattern
  - type : text / button / password / search / date / time / range / number / color / radio checkbox / file / email / url / tel
- input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있음
- 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 요소를 사용하는 것을 지향
```
    이름 :
    
```
- for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 함
- 이름: 영역을 클릭하면 input 입력 영역에 포커스