jw 노트

왕복 4시간 걸리는 웹에이전시 출근 3주차 후기

jwss — Sat, 9 Dec 2023 22:24:18 +0900

와 벌써 출근한지 3주차가 다 되어간다.
출퇴근 시간 때문에 걱정하고 어리바리하게 출근한 첫날이 바로 며칠 전 같은데 직장인의 시간은 정말 빠르게 지나가는것 같다.

국비수업을 첫 계기로 웹퍼블리셔 공부를 하고 몇 년간 취업을 하지않았기 때문에 그 기간동안 과연 내가 취업을 할 수 있을지 여러모로 고민이 많았는데 내가 출근을하고 있다는게 아직도 얼떨떨하고 신기하다.

왕복 4시간 출퇴근

회사 출퇴근은... 왕복 4시간이지만 생각보다는 할만하다. (물론 아직 3주차라서 그럴 수도 있다)
원래는 출퇴근 시간을 잘 활용해서 인강도 보고 책 읽으면서 다녀야지! 했는데 공부는 무슨 지옥철 겪으면 넋빠져서 그냥 넋놓고 다니거나 웃긴거 보면서 다니는게 최선이었다^^
한 번에 쭉 가기라도 하면 좀 편할텐데ㅎ 출근할 때마다 판교에 이렇게 출근하는 사람들이 많구나 싶다.

회사

회사는 감사한 마음으로 다니고있다.
퍼블리셔로서의 경력을 위해 웹에이전시에 가고싶었는데 사실 웹에이전시라고 하면 직원수도 적고, 사수도 없고 시설도 별로고...이런 걸 각오했었다.
아니 그런데 왠걸 내가 기대도 별로 안한 큰 에이전시에 합격하게 됐다.
회사 건물도 너무 깔끔하고 라운지랑 사내 카페도 있고 헬스케어룸도 있고 주 1회 재택도 가능하고 9시~11시 자율출근이고!!
합격 후에는 내가 이렇게 좋은 회사에 붙다니! 하고 복지라고는 아는 것도 없었는데 막상 가보니 더 좋아서 놀라는 중이다.
걱정했던 팀원 분들도 다들 좋은 분이셔서 잘 배울 수 있을 것 같고 동기도 있어서 스트레스 받지않고 다니는 중이다.

업무

지금은 업무랄게 없고 과제를 받아서 약 3~4일간 진행 후에 피드백 받는 식으로 진행하고 있다.
여기서 이렇게 체계적으로 배울 수 있다는 점에서 또 감동...
사실 HTML CSS는 조금 쉽게 보던 경향이 있었는데 막상 실무에서는 훨씬 더 섬세하게 고려해야할 부분이 많아서 역시 쉽지않구나 싶었다.
나름 접근성 공부도 좀 했다고 생각했는데 내가 몰랐던 이슈들도 정말 많고... 공부는 끊임없이 해야할것 같다.

아무튼 이렇게 좋은 회사에서 대기업 업무 맡을 수 있다는게 참 행운인 것 같다. 열심히 해야지

웹퍼블리셔 취뽀 완료

jwss — Fri, 24 Nov 2023 22:52:56 +0900

공부를 기록하던 블로그를 여기서 velog로 옮겨 버려서 여기를 방치하다가 조회수가 꾸준히 나오는걸 보고 여기를 그냥 방치하는게 좀 아까워졌다. 국비 수업을 들은 이후 방황하던 21년도부터 공부하던걸 기록하던 곳이라 나름의 추억이 담기기도 했고?

퍼블리셔 면접을 보러 다니면서 여기에다가 면접 기록, 면접 일기나 후기 같은 것을 써보려고 했는데 놀랍게도 처음 간 면접에서 한 번에 붙어버려서 그 계획도 무산이 되었다.

그동안의 걱정과 불안이 무색하게도 첫 면접에서 규모있는 웹에이전시에 합격하게 됐다.
회사 건물도 그렇고 여러가지 시스템도 굉장히 마음에 들고 팀원분들도 친절하셔서 즐겁게 다니고 있다.
재직하면서 이런 저런 실수도 할 테고 앞으로 5주간은 과제 받으면서 피드백 받을테니 그런것들을 기록해보려고 한다.
(면접 봤던것도 도움 받는 사람이 있을테니 써볼까?)

요새 확실히 취업시장이 얼어붙은 것 같은데 취업준비생들 모두 화이팅 입니다ㅠㅠ

4주차: 디자인 시안으로 코딩하기

jwss — Thu, 29 Dec 2022 17:04:41 +0900

실무에서 처럼 디자인 시안을 받았다고 가정하고 작업했다.

bg 사용할 때는 span class="blind"로 텍스트 플라인드 처리하고 이미지 설명

img 사용할 때는 alt 꼭 써주기 > 리더기가 읽기 때문에

디자인 시안 종류

psd는 용량이 크고, 폰트 영역을 잡거나 이미지를 저장할 때 힘들다.

피그마, 재플린, xd는 이미지 1배수, 2배수, 3배수 등 배수 별로 이미지를 다운로드 가능, 폰트도 누르면 바로 카피가 가능하므로 사용이 쉽다.

피그마, 재플린, xd로 시안을 받으면 360 이나 380

포토샵으로 시안을 받으면 640, 720 > 2배수 (해상도 때문)

올바른 태그 사용

<h2> 영역에 대한 제목

<h3> 콘텐츠에 대한 제목

<strong> 문장강조, 게시글 제목

<em> 단어강조, 이벤트기간

<span> 작성자 작성일

전화번호는 a태그로 전화걸리게 <a href="tel:+010-1111-1111">

포토샵 단축키

V 기본 선택툴 (자동선택, 레이어)

M 드래그툴

- 포토샵 이미지 슬라이스 방법

크롭툴에서 이미지 영역 드래그 > 영역을 모르겠다면 v 선택해서 배경 레이어 끄기 > ctrol 누르고 다른 레이어 선택하면 다른 이미지 선택됨 > control+alt+shift+s 누른 후 선택, jpg 최댓값 저장 / png 저장할때는 png24

이미지를 배경만큼 자르냐 vs 이미지를 딱 콘텐츠 영역만큼으로 자르냐에 따라 대응해서 코딩해야한다.

- 이미지 정보보기

레이어를 control 키를 누른 상태로 클릭> window에 info 선택 > 이미지 정보(너비 높이) 볼 수 있다.

파일구조

layout.css

reset, common, 폰트 import로 받아온다.

reset.css

<body>에 기본 베이스가 될 폰트(폰트, 폰트색상, 자간)정의, 화면의 최소너비 지정

- 화면의 최소너비
body에 min-width 설정 > 화면이 min-width보다 작아지면 가로 스크롤 생성된다.
가이드라인 바깥으로 나간 화살표 크기까지 고려한다.

index.html에서 reset이 포함된 layout.css 를 먼저 받아온 후 main.css 받아온다.

메인비주얼 가운데로 잡아주기

화면을 확대 축소 하게 되면 아래 이미지처럼 메인 비주얼 이미지가 한 쪽으로 쏠리는 상황이 생기는데,

이것은 해당 역역의 img에 width: 100%를 주거나, margin: 0 auto를 주는 방식으로 잡을 수 있다.

두 방법의 결과물은 차이가 있다.

width: 100%를 줄 때는 화면을 아무리 확대 축소를 하게되도 이미지가 영역에 꽉 차게 되지만

img에 width: 100%

marin: 0 auto; 를 줄 때는 화면을 확대축소 했을 때 이미지가 영역에 꽉 차지는 않고 가운데에만 위치하게 된다.

img에 margin: 0 auto;

화살표 위치 잡기

화살표의 위치를 잡을 때 단순 px 값으로 잡을 경우, 화면을 축소하고 확대시킬 때 이상하게 보이게되기 때문에 상대적인 값으로 위치를 잡아주어야한다.

- 이미지 width가 100%일 때

메인비주얼 이미지 width가 100%인 상황일 때, 각 왼쪽 오른쪽 버튼을 position %로 위치 잡아준다,

psd 시안에서 양 끝쪽에서 화살표의 거리를 측정하고 나온 px 수치를

측정했을 때 327px이 나온다

네이버 퍼센트 계산기에서 입력해주면 %로 치환할 수 있다.

이 값을 화살표 각각에게 17% 씩 주면 위치를 잡을 수 있다.

- 이미지에 margin 0 auto를 줬을 때

메인비주얼 이미지 width가 100%가 아니라 margin:0 auto로 줬을 경우, 위의 방법처럼 position %로 잡아주면

화면 확대 축소를 하게 됐을 때 버튼들이 화면을 기준으로 고정적으로 위치가 잡히므로 이상한 곳에 위치하게 된다.

그래서 우선 버튼을 position으로 정중앙에 위치시키고 margin-left로 밀어서 위치에 고정시킨다.

이 때 왼쪽은 623px을 밀고 오른쪽은 600을 미는데 position: absolute; left: 50% 즉, left를 기준으로 잡아줬기 때문에 왼쪽에 위치한 화살표는 화살표의 너비인 23px을 더 밀어줘야하기 때문에 623px의 수치가 나온다.

상하 여백 잡기

웹에서는 글씨에 들어가는 여백이 있으므로 포토샵에서 폰트 바로 위의 상하단 여백을 측정하면 안된다.

웹의 글씨의 높이만큼 포토샵에서 M키를 눌러 드래그하여 영역을 잡아준다 > 영역을 글씨 중앙에 위치하도록 잡아준다. > 영역만큼 가이드라인을 잡는다 > 가이드 라인의 상하 여백을 측정한다.

과제 자주 틀리는 부분

header util 폰트사이즈 적용

gnb 폰트 스타일 적

sns 라인 맞추기

화살표 나오기

페이지네이션 위치 제대로 잡기

headline 상하단 여백 위의 방식으로 잡기

버튼 박스사이징 잡아줘서 너비 높이 맞추기

추천제품 텍스트박스 여백 잘 잡아주기

추천제품 게시글 글 간의 여백

best reviews 화살표 위치 1200끝 라인에 잘 잡아주기

뉴스 다운로드 패딩

뉴스 다운로드 더보기 앱솔루트로 위치 잡기

말줄임처리 다 넣기 > 제목은 한줄, 콘텐츠 여섯줄

footer 영문 폰트 넣기

해상도 때문에 모바일 2배수로 되있음

control alt i 해서 320으로 시안변경

[JS] async vs defer, 스크립트를 HTML에 포함할 때 효율적인 방법

jwss — Wed, 14 Dec 2022 19:55:57 +0900

HTML에서 스크립트를 포함할 때 어떤게 더 효율적인 방법일까?

사용자가 HTML을 다운 받았을 때 브라우저는 HTML 마크업을 위에서부터 한 줄 씩 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환하게 된다.

<head> 안에 스크립트를 포함한 경우

HTML을 파싱하는 동안 브라우저가 <script>를 만나는 경우 파싱이 중지되며 스크립트를 로드하는 시간, 실행하는 시간만큼 렌더링이 지연된다.

<head> 태그 안에 <script> 태그 넣을 경우

위에서부터 한 줄 씩 HTML 파싱(구문분석) > script 태그 발견 > html 파싱하는 것을 멈추고 필요한 스크립트를 서버에서 다운 > 스브립트 실행 > 다시 html 파싱

단점 : 스크립트가 준비될 때 까지 HTML 파싱을 멈추기 때문에 사용자가 웹페이지를 보는데까지 많은 시간이 소요된다.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> head 태그 안에 script </title>
        <script src="main.js"></script>
    </head>
    <body></body>
</html>

<body> 끝부분에 script를 넣는 경우

body의 내용이 렌더링 된 이후 <script>를 만나 로드하고 실행하기 때문에 위의 경우보다 렌더링 시간이 빨라진다.

스크립트가 DOM 요소를 조작하는 내용을 포함한다면 스크립트가 렌더링된 DOM에 접근할 수 있도록 위보단 아래에 작성하는 것이 좋다.

<body> 태그 끝에 <script> 태그 넣을 경우

HTML 파싱 > 파싱완료 > 스크립트 다운 > 스크립트 실행

장점 : HTML을 전부 파싱하고 스크립트를 다운, 실행하기 때문에 스크립트가 준비되기 전에 사용자가 웹페이지 컨텐츠를 볼 수 있다.
단점 : 사용자가 기본적인 HTML 콘텐츠는 빨리 볼 수 있지만 서버에서 스크립트를 다운하고 실행하는 시간도 기다려야하므로 JS가 큰 역할을 하는 웹페이지일 경우 사용자는 정상적인 웹페이지를 볼 수 없다.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> body 태그 안에 script </title>
    </head>
    <body>
		..
        ..
        ..
    	<script src="main.js"></script>
    </body>
</html>

async 속성 사용

브라우저가 <script>를 만나면 다운로드와 동시에HTML 파싱이 진행되며 스크립트 다운이 완료되면 스크립트를 실행하고 HTML 파싱은 멈춘다.

async 속성의 스크립트는 DOM 요소를 조작하지 않고 앞뒤에 로드되고 실행될 스크립트와 의존성이 없는 코드를 포함시키는 것이 좋다.

async 속성 사용

HTML 파싱 > 스크립트 발견 > 파싱과 동시에 스크립트 다운 > 스크립트가 로드되면 HTML 파싱을 멈추고 스크립트 실행 > 나머지 HTML 파싱

장점: 스크립트 다운이 HTML 파싱과 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약 가능
단점: 스크립트가 HTML이 파싱이 되기 전에 실행되기 때문에 자바스크립트에 DOM요소를 조작하는 코드가 들어있을 경우 원하는 요소가 정의되있지 않을 수 있다.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> head 태그 안에 script </title>
        <script async src="main.js"></script>
    </head>
    <body></body>
</html>

defer 속성 사용

defer 속성을 가진 script는 브라우저가 script를 만났을 때 html 파싱을 막지 않고 스크립트 다운을 시작하여 /html 태그를 만났을 때 스크립트가 실행된다.

defer 속성은 스크립트가 DOM 요소를 조작하는 내용을 포함시킬 때 사용하면 좋다.

defer 속성 사용

HTML 파싱 > 스크립트 발견 > 스크립트 다운로드와 HTML 파싱 > 파싱완료 되면 스크립트 실행

장점 : 다운과 파싱을 동시에 하며 HTML 파싱을 사용자에게 보여준 뒤 다운로드 한 스크립트를 이어서 실행하기 때문에 가장 효율적이다.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> head 태그 안에 script </title>
        <script defer src="main.js"></script>
    </head>
    <body></body>
</html>

async vs defer

async는 다수의 스크립트를 다운로드 받게 될 경우, 스크립트를 정의한 순서에 상관 없이 먼저 다운로드 한 스크립트를 실행하기 때문에 순서에 의존적인 스크립트라면 문제가 생길 수 있다.

반면 defer은 파싱하는 동안 필요한 스크립트를 모두 다운하고 순서대로 실행하기 때문에 정의한 순서가 지켜지므로 원하는 방향으로 스크립트를 실행할 수 있다.

[Sass] Sass 작성 규칙

jwss — Wed, 14 Dec 2022 17:23:09 +0900

Sass 작성 규칙을 익히려면 아무래도 따로 정리가 필요할 것 같아서 정리해보는 글

인코딩

windows 환경에서 컴파일할 때 오류가 발생할 수 있으므로 모든 scss 파일에 charset을 선언한다.
컴파일 후, charset 선언은 하나만 남게 되므로 여러 파일에서 작성해도 문제없다.
@charset 선언 전에 공백에 없도록 주의한다.

@charset "UTF-8"

header { background-color: #000; }

중첩

최대 3뎁스 중첩까지 사용을 권장한다. (셀렉터의 갯수가 아닌 scss 코드 상의 중첩)
3뎁스가 넘어갈 경우 하위연결자나 별도의 모듈로 뽑아낸다.
미디어 쿼리의 중괄호는 중첩 수에 포함시키지 않는다.

header {
	h1 {
    	a {}
    }
    .gnb {}
}

들여쓰기

중첩마다 들여쓰기 한다.
하위 선택자가 시작되면 빈 줄을 추가한다.
@extend, @include를 상단에 모아쓰고 그 뒤에 빈 줄을 추가한다.
재선언이 필요한 경우 @include를 하단에 사용할 수 있다.

.gnb {
	@extend %a;
    @include position-center;
	
    overflow: hidden;
    background: #000;
    
    ul {
    	...
    }
}

주석

sass에선 주석 //는 컴파일 되지 않고 /**/는 컴파일이 된다.

CSS 주석표현인 /* 주석 */으로 import되는 파일 상단에 파일명 표기 > 개발자도구로 디버깅 시 선언위치 파악에 도움됨.
그 외 주석은 컴파일되지 않도록 //으로 표기 (기능,변수 등에 대한 설명, UIO)
CSS에 반드시 컴파일 되어야하는 주석이 있다면 /* 주석 */ 으로 표기

네이밍 규칙

(1) Mixin

문자 및 연결자 : 카멜 케이스

class명 (_name), css 속성명(-name)과 다르게 눈에 들어올 수 있는 네이밍이 필요하여 Camel Casing Notation 권장.

@mixin textCenter($height) {
	....
}

@mixin positionCenter {
	....
}

(2) 변수

지역변수: 소문자
전역변수: G-소문자
상수: 대문자
연결자: - (Hyphen)
네이밍 조합: $(요소이름)-(속성이름)-(용도 및 역할)

용도 및 역할은 축약형 지양

네이밍 조합 케이스	예시
$요소이름 - 속성이름	$G-body-color, $body-background-color
$요소이름 - 용도 및 역할	$body-horizental
$요소이름 - 속성이름 - 용도 및 역할	$body-color-point, $body-background-color-point
$요소(class)이름 - 속성이름 - 용도 및 역할	$btn-border-color-hover
$용도 및 역할	$count, $max-count

//변수선언
$G-body-color: #000;

body {
	//변수사용
	background: $G-body-color;
}

[JS] 자바스크립트의 역사

jwss — Tue, 13 Dec 2022 20:01:44 +0900

자바스크립트의 탄생

1993년 미국 일리노이대학 국립 슈퍼컴퓨터 애플리케이션 센터(NCSA)에 근무하던 마크 앤드리슨 (Marc Andreessen)과 에릭 비너 등 8명은 "모자이크" 라는 웹브라우저를 세상에 내놓았다.

등장한지 20년이 됐지만 여전히 사용하기 어렵던 인터넷 환경에서 최초로 그림과 텍스트를 함께 표시하는 기능을 갖춘 모자이크 웹브라우저는 폭발적인 인기를 얻게 된다.

모자이크 웹브라우저

모자이크 웹브라우저의 개발팀을 이끌던 마크 앤드리슨은 Netscape 라는 회사를 설립하여 조금 더 UI 요소를 더한 넷스케이프 네비게이터 (Netscape Navigator) 를 시장에 내놓고 시장의 80% 점유율을 자랑하며 급격히 성장한다.

하지만 이 당시 웹브라우저는 html과 css로만 이루어진 정적인 웹사이트만 만들 수 있었기에 마크 앤드리슨은 동적인 웹사이트를 만들기 위해 고민을 거듭하다가, 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다.

처음으로 고려되었던 언어는 당시 각광받고 있던 java였으나 웹개발자들이 사용하기에는 무겁고 어려운 언어였으므로 브렌던 아이크를 스카웃 하여 기존에 존재하던 스킴스크립트 (Scheme Script) 언어의 컨셉을 유지하면서 문법을 Java 스럽게 만들어 탄생시킨 언어가 자바스크립트 (JavaScript) 이다.

자바스크립트는 원래 "모카"라는 이름으로 개발되었으나 그 해 9월 "라이브스크립트"로 이름이 바뀌고 당시 인기있던 언어인 자바 (Java) 의 인기에 편승하기 위해 "자바스크립트"라는 이름으로 최종 명명되었다.

이렇게 1995년 공식적으로 넷스케이프 네비게이터에 자바스크립트와 자바스크립트를 이해할 수 있는 엔진(인터프리터)이 포함되어 출시된다. 웹개발자들이 자바스크립트를 이용해 웹페이지를 만들게 되면 넷스케이프 네비게이터 브라우저가 그 언어를 이해하고 그 언어가 실행하고자 하는 것에 알맞게 DOM 요소들을 조작할 수 있게된 것이다.

자바스크립트의 표준화

그러나 자바스크립트는 탄생한 뒤 얼마 지나지 않아 위기를 맞게 된다.

1996년 마이크로소프트가 자바스크립트를 파생한 "JScript"를 인터넷 익스플로러3.0에 탑재하여 시장에 출시한 것이다.

넷스케이프와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능들을 경쟁적으로 추가하고 이로 인해 크로스 브라우징 이슈가 발생하여 웹 개발자들은 모든 브라우저에서 정상적으로 작동하는 웹페이지를 개발하기 어려워졌다.

이를 위해 1996년 11월, 넷스케이프는 컴퓨터 시스템의 표준을 관리하는 기구, ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다. 그리하여 1997년 7월 ECMAScript 1이 나오게 된다.

이 ECMAScript는 프로그래밍 언어의 값, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한 문서로 해를 거듭하며 범용 프로그래밍 언어로서 갖춰야할 기능들을 도입하고 크고 작은 변화들이 일어났다.

2000년 익스플로러는 시장의 90% 이상의 점유율을 갖고있었는데, 많은 시장 점유율을 차지한 마이크로소프트사가 ECMAScript에 불만을 표시하며 표준화 작업에 참가하지 않게되고 이후 표준화 작업이 더뎌지게된다.

2004년 모질라에서 파이어폭스라는 브라우저가 출시된다. 그리고 모질라는 자사의 언어 ActionScript3과 그 언어를 이해하는 엔진 Tamarin으로 표준화 검토를 제안하나 이것은 기존에 쓰이던 J스크립트나 자바스크립트와는 너무 달랐기에 무리가 있었다.

표준화를 두고 모질라, 네스케이프, 마이크로소프트 3사의 치열한 신경전이 벌어지고 있었다.

그러던중 2008년 구글에서 출시한 크롬 브라우저가 등장한다.

크롬 브라우저는 자바스크립트를 실행하는 속도가 매우 빠른 JIT (just-in-time compilation)이라는 강력한 엔진이 포함된 브라우저로, 기존에 존재하던 브라우저의 성능을 압도했고 다른 브라우저들에게 좋은 자극을 주게된다.

2008년 7월에 모든 브라우저들이 모여 표준화를 만들기로 협의하고 2009년 ECMAScript 5가 나오게 된다.

뒤를 이어 2015년 ECMAScript6가 나오며 많은 변화가 일어나고 그 뒤로도 매년 새로운 버전들이 나오고있다.

현재는 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

자바스크립트의 성장

초기 자바스크립트는 웹피이지의 보조적인 기능을 수행하기 위한 한정된 용도로 사용됐다.

이 시기에 대부분의 로직은 웹 서버에서 실행되었고 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순 *렌더링하는 수준이었다.

* 렌더링 : HTML, CSS, 자바스크립트 문서를 해석해 브라우저에 시각적으로 출력하는 것. 때로는 서버에서 데이터를 HTML로 변환하여 브라우저에게 전달하는 과정을 가리키기도 한다.

1999년 자바스크립트를 이용해 서버와 브라우저가 *비동기적으로 데이터를 교환할 수 있는 통신기능인 Ajax가 등장했다.

* 비동기 : 한 번에 하나의 작업만 진행하는 동기 방식과 다르게 비동기 방식은 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.

동기적 vs 비동기적

이전의 웹페이지는 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 하는 방식으로 동작했다.

그래서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 렌더링 했는데 이러한 방식은 변경할 필요가 없는 부분까지 처음부터 렌더링 하기 때문에 성능면에서 불리했다. (화면이 전환될 때 순간적으로 깜빡이는 현상 발생)

하지만 Ajax가 등장하며 웹피이지에서 변경할 필요가 없는 부분은 다시 렌더링 하지 않고 서버로부터 필요한 데이터만 받아 변경해야하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.

[Sass] CSS 전처리기 Sass

jwss — Mon, 12 Dec 2022 21:35:50 +0900

CSS 전처리기란?

CSS는 프로젝트 규모가 커지면 쉽게 지저분해지고 유지보수가 어려워지는 단점이 있다.

CSS 전처리기는 이러한 CSS의 한계를 보완하기 위해 자신만의 특별한 문법을 갖고 CSS를 생성하는 프로그램이다.

메타언어로서 추가 기능과 도구를 제공하여 CSS 구문을 개선한다.

대표적인 전처리기로는 Sass, LESS, Stylus 등이 있다.

Sass 그리고 SCSS

Sass: Syntactically Awesome StyleSheet
SCSS: Sassy SCC

CSS 전처리기라고 하면 대표적으로 Sass에 대해서 들었을텐데 그 때 꼭 같이 듣게 되는 것이 SCSS이다.

Sass는 들여쓰기 감지를 핵심 특성으로 갖는 표기법과 전처리기 두 가지를 의미한다.

Sass는 코드를 작성할 때 중괄호를 사용하지 않고 들여쓰기로 구문을 감지하고 세미콜론을 사용하니 않는다.

이 문법은 css 문법과 다소 차이가 있다.

Sass의 개발자들이 CSS와 차이를 좁히기로 결정하면서 등장한 것이 SCSS이다.

SCSS는 Sass 3.0에서 등장한 표기법이다. Sass의 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 각광받고 있다.

Sass의 SASS 표기법과 SCSS 표기법에는 이런 차이가 있다.

	SCSS 표기법	SASS 표기법	CSS
중괄호 {}	필요	불필요 (2문자 들여쓰기가 코드 블록을 의미함)	필요
세미콜론 ;	필요	불필요	필요
: 뒤 공백	불필요	필요	불필요
Mixin	@mixin	=	없음
Include	@include	+	없음
확장자	.scss	.sass	.css

참고로 Sass, SCSS 등으로 작성된 파일들은 곧바로 웹에서 적용할 수는 없다.

웹은 기본적으로 CSS 파일만 읽을 수 있기 때문에 이 파일들은 별도로 컴파일하는 과정을 거친 후 css 파일로 변환해서 사용한다.

2주차: flex, grid

jwss — Sun, 11 Dec 2022 21:34:04 +0900

2주차 수업은 flex, grid와 scss를 간단히 배웠다.

flex는 중심축과 반대축이 있다.

중심축을 중(j)심의 j라고 외워서 justify-content 사용하는 축

반대축을 바안(a)대의 a라고 외워서 align-items 사용하는 축이라고 외우면 편하다.

flex의 특징

(1) float를 사용해서 아이템을 정렬하고 아이템에 패딩을 줄 경우 box-sizing: border-box를 쓰지 않으면 밑으로 떨어졌겠지만

flex는 무조건 한 줄에 들어오기 때문에 (flex-wrap: no-wrap이 기본이기 때문) box-sizing: border-box를 쓰지 않아도 떨어지지 않는다.

(2) flex의 아이템들은 높이를 공유한다. align-items: strech가 기본 값이기 때문에 따로 높이를 설정하지 않아도 각 아이템들의 높이가 맞는다.

(3) order는 기본 값이 0으로 세팅되어 있어서 -1이나 1만주면 앞으로 배치되거나 뒤에 배치될 수 있다.

(4) space-between은 사이 간격이 예측이 안 될 때 사용하기 좋음.

자식에게 쓰는 수치

flex-grow

증가 비율. 아이템이 가진 넓이보다 커졌을 때 지정한 비율대로 늘어남.

증가 비율 값은 여백의 비율을 기준으로 하기때문에 안에 콘텐츠가 들어갈 경우 원하는 비율로 조정하기 어렵다. (그래서 flex 속성을 사용)

출처 - 1분코딩

flex-shrink

수축 비율 1이 기본값이라서 수축하라고 하지 않아도 알아서 줄어듦.

0으로 지정하면 수축 안함.

flex-basis

중심축을 기준으로 한 너비 높이 설정. width나 height의 대체재로 사용할 수 있다.

flex-direction: row; 일 때 flex-basis: 100px;을 준다면 width가 100px이 되고

flex-direction: column; 일 때 flex-basis: 100px을 준다면 height가 100px이 된다.

grow나 shrink를 사용해서 아이템이 늘어나거나 줄어들 때의 기준이 된다.

(flex-basis: 100px이라면 100px보다 작아질 때/ 커질 때를 기준)

flex

flex-grow flex-shrink flex-basis의 단축 속성.

flex:1; 을 주면 아이템이 1:1:1이 된다.

풀어서 써보자면 flex-grow: 1, flex-shrink: 1, flex-basis: 100%; 인데 증가,수축을 하는데 100% 동일한 비율로 증가 수축 한다.

flex: 1 0 500px; 이면 증가하고 수축안하고 500px을 기준으로 증가하고 수축을 하지 않는다는 의미.

grid

grid는 10등분으로 나누고 70%를 차지하는 아이템은 7칸, 30%를 차지하는 아이템은 3칸 차지하도록 세팅하면 편하다.

span 7 = 7칸을 차지해라

SCSS (SASS)

sass 참고자료

https://sass-guidelin.es/ko/

Sass Guidelines — Korean translation

분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.

sass-guidelin.es

https://webclub.tistory.com/518?category=541910

Sass 코딩 컨벤션

Sass Coding Convention Sass 작성을 위한 컨벤션에 대해 알아봅니다. Table of Contents 폴더 구조 [Folder structures] 파일 구조 [File structures] 인코딩 [Encoding] 중첩 [Nesting] 들여쓰기 및 선언 순서 [Style Rules] 띄워

webclub.tistory.com

환경설정

(1) Live Sass Compiler 설치 > 톱니바퀴 > 확장설정 > Format > "format": expended 로 되어 있는 부분 변경

css로 변환될 때의 설정을 지정하는 것.

(2) 확장설정 > Generate Map > json 편집에서 generateMap: false 확인

폴더, 파일구조

프론트엔드 프로젝트의 경우는 scss 7-1 패턴으로 사용되며

퍼블리셔 범위에서 컴포넌트까지의 분리는 사용하지 않는다면 아래 이미지처럼 구성해두고 style.scss는 모든 파일을 import하는 방법을 추천.

scss,sass,less 등 전처리도구를 사용하지 않는다면 CSS 아키텍처중 하나인 7-1 패턴

이런식으로 분할해서 사용하면 된다.

abstracts (utills 라고도 함)

실제 스타일은 없고, 그저 다른 폴더에 정의된 스타일을 돕는 역할을 하는 파일을 모으는 폴더.

글로벌 변수, 함수를 포함하는 _variables.scss와 mixin을 포함하는 _mixins.scss를 가진다.

base

사이트 전반에 걸쳐서 재사용되는 스타일을 여기에 정의한다.

사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당한다.

_reset.css 등

components

컴포넌트는 '소형' 레이아웃을 의미한다.

사이트 내에서 재사용 가능한 작은 부분들을 여기에 정의한다.

buttons, forms, profile pictures와 같은 것들이 해당된다.

layout

사이트 구조에 해당하는 레이아웃을 여기에 정의한다.

nav bars, headers, footers 같은 것이 해당된다.

pages

모든 페이지가 같은 스타일을 사용할 수 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣는다.

예를들어, 'Contact Us' 에서만 사용될 스타일이 있다면 _contact.scss 와 같이 네이밍한 후 이 폴더에 넣으면 된다.

themes

사이트가 다른 종류의 모드를 지원할 때 사용된다.

예를 들어 관리자모드 / 디폴트모드가 있는 사이트나 다크모드 / 라이트모드가 있는 사이트가 있을 수 있다. 각 모드에 따라서 각기 다른 스타일이 지정되기 때문에 이렇게 사용한다.

vendors

프로젝트에서 사용되는 외부 스타일을 이 폴더에 넣으면 된다.

예를 들어 부트스트랩을 커스터마이징 하고 싶다면 부트스트랩 stylesheet를 다운받아 이 폴더에 넣으면 된다.

style.scss

모든 scss 경로가 모이는 곳.

위와 같이 각 폴더의 기준에 따라 scss 파일들을 분류했다면, 이 파일을 한데 모을 허브가 필요하다.

해당 파일에는 직접 스타일을 정의하지 않고 import 만을 담당한다.

여기로 모이는 scss 파일들은 파일명 앞에 _(언더바)를 붙인다. 언더바가 붙은 파일은 컴파일이 되지 않으므로 style.scss만 컴파일이 되는 것.

경로 가져오는 순서 : 변수 (_variables.scss) > 믹스인(_mixin.scss) > ...

변수는 reset 보다 전에 세팅 되어야 사용할 수 있다.

- 내부경로 가져올 때
@import './reset';

- 외부경로 가져올 때
@import url('./reset');

_mixin.scss

믹스인은 코드를 재사용 가능하게 만드는 것. 재사용 가능한 코드들을 모아둔다.

_variables.scss

변수를 모아두는 파일.

_reset.scss

reset css 설정

하단에 watch sass를 누르면 css로 컴파일 된 파일 확인 가능.

html에서 가져오는 건 css 파일. 하지만 코드 수정은 scss에서.

사용 예시

중첩 (Nesting)

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

header {
	background-color: #000;

	h1 { font-size: 30px; }
    .sns { float: left; }
    .login { float: right; }
}

상위 선택자 참조 (Ampersand)

중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.

/* .btn.prev와 .btn.next를 꾸며줄 때 */
/* 부모자식 관계가 아니므로 &를 붙여줌 */

.btn {
	&.prev { left: 10px; }
    	&.next { right: 10px; }
}

믹스인 (Mixin)

믹스인은 재사용한 기능을 만드는 방식을 의미한다.

Mixin은 두가지만 기억하면 된다. 선언하기 (@mixin)와 포함하기 (@include).

만들어서(선언) 사용(포함)하는 것이다.

(1) _mixins.scss 파일

// 믹스인 - 재활용 가능한 소스 만들기

// 중앙정렬 소스 만들기
@mixin position-center {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 말줄임표 소스 만들기
// $line의 기본은 1로 설정
@mixin ellips($line:1) {

	overflow: hidden;
    text-overflow: ellipsis;
	
    // 여러줄 말줄임표
	@if($line > 1) {
    	display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    // 한줄 말줄임표
    @else {
    	white-space: nowrap;
    }
    
}

(2) _main.scss 파일

말줄임은 괄호 안의 숫자를 $line으로 받아서 처리함.

h1 {
	@include position-center;
}

.box1 {
	//한 줄 말줄임표
	@inclue ellips;
}
.box2 {
	//두 줄 말줄임표
	@include ellips(2);
}

변수 (Variables)

포인트 컬러나 폰트 사용 시, 변수에 저장해두고 갖다 쓰면 편리하다.

(1) _variables.scss 파일

$red: rgb(197, 78, 45);
$title-size: 30px;

(2) _main.scss 파일

h1 {
	color: $red;
    font-size: #title-size;
}

수업 후기

flex랑 grid는 둘째치고 scss에서 좀 멘붕왔었다..

아예 처음 써보는거라서 그런 것 같으니 익숙해지려면 여러 번 써봐야겠다.

[CSS] CSS Flex에 대해 알아보자

jwss — Sun, 11 Dec 2022 17:59:38 +0900

flex는 행과 열 형태로 배치하는 일차원 레이아웃 배치 속성이다.

기존에 사용하던 float이나 inline-block을 활용해서 레이아웃을 만드는 것보다 편리한 기능들을 제공한다.

flex 레이아웃은 flex container라고 불리는 부모요소와 flex item이라 불리는 복수의 자식요소로 구성된다.

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
</div>

자식요소 flex item을 포함하는 부모요소 flex container

flex의 속성들은

flex 컨테이너(부모요소)에 적용하는 속성
flex 아이템(자식요소)에 적용하는 속성

2가지로 나뉜다.

1. 컨테이너에 적용하는 속성들

1.1 display: flex;

display: flex | inline-flex

flex를 사용하기 위해서 flex container에 항상 써줘야 하는 속성이다.

flex : 컨테이너에 display: flex를 써주기만 해도 세로로 배치되던 컨테이너 안의 아이템들이 가로로 배치된다.
inline-flex : 아이템의 배치보다는 컨테이너가 주변 요소들과 어떻게 배치될지를 결정한다. inline-block 처럼 동작함.

아래 이미지는 container1에 display: flex를 적용했다.

flex 아이템들은 가로 방향으로 배치된다. 자신의 콘텐츠 만큼만 width를 갖게 되고 height는 컨테이너의 높이 만큼 알아서 늘어난다. (align-items: strech가 기본 값이기 때문)

아래는 container1에 display: inline-flex를 적용했다.

display: flex; 처럼 컨테이너 안의 아이템들이 정렬되긴 하나, 컨테이너와 다른 요소의 배치도 정렬된다.

1.2 flex-direction 배치 방향 설정

flex-direction: row (default) | column | row-reverse | column-reverse

아이템이 배치되는 방향을 설정하는 속성이다.

row (default) : 아이템이 가로(행) 배치된다.
column : 아이템이 세로(열) 배치된다.
row-reverse : 아이템이 역순으로 가로 배치된다.
column-reverse : 아이템이 역순으로 세로 배치된다.

1.3 flex-wrap 줄넘김 처리 설정

flex-wrap: nowrap (default) | wrap | wrap-reverse

컨테이너가 아이템을 더 이상 한 줄에 담을 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정한다.

nowrap (default) : 줄바꿈을 하지 않는다.
wrap : 줄바꿈을 한다.
wrap-reverse : 줄바꿈을 하되 역순으로 한다.

1.4 flex-flow (flex-direction flex-wrap 단축속성)

flex-flow: row wrap | column wrap-reverse ~

flex-direction과 flex-wrap을 한 번에 지정할 수 있는 단축 속성이다.

flex-direction, flex-wrap 순서대로 써주면 된다.

1.5 justify-content 메인축 방향 정렬

justify-content: flex-start (default) | flex-end | center | space-between | space-around | space-evenly

메인축 방향으로 아이템들을 정렬하는 속성이다.

flex-start (default) : 아이템들을 메인축 시작점으로 정렬한다.
flex-end : 아이템들을 메인축 끝점으로 정렬한다.
center : 아이템들을 메인축 가운데로 정렬한다.
space-between : 각 아이템들의 사이에 균일한 간격을 만들어준다.
space-around : 각 아이템들의 둘레에 균일한 간격을 만들어준다.
space-evenly : 각 아이템들의 사이와 양 끝에 균일한 간격을 만들어준다.

오른쪽 이미지 출처 : 1분코딩

1.6 align-items 수직축 방향 정렬

align-items: strech (default) | flex-start | flex-end | center | baseline

수직축 방향으로 아이템들을 정렬하는 속성이다.

strech (default) : 아이템들이 수직축 방향으로 컨테이너의 높이만큼 쭈욱 늘어난다.
flex-start : 아이템들을 수직축 시작점으로 정렬한다.
flex-end : 아이템들을 수직축 끝점으로 정렬한다.
center : 아이템들을 수직축 가운데로 정렬한다.
baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

1.7 align-content 여러 행 아이템 묶음 정렬

align-content: strech (default) | flex-start | flex-end | center | space-between | space-around | space-evenly

flex-wrap: wrap 을 설정한 경우 아이템들의 행이 2줄 이상이 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.

justify-content와 비슷하게 작동하나 수직축 방향의 정렬이라고 보면 된다.

1.8 gap 아이템 간격

gap: 10px (숫자값)

gap은 아이템 간의 간격을 설정 할 수 있다.

column-gap 열간 간격을, row-gap은 행간 간격을 따로 설정 할 수 있고 gap으로 한 번에 행열 간격을 써줄 수 도 있다.

.container {
    /* gap: 40px 10px; */
    column-gap: 10px;
    row-gap: 40px;
}

2. 아이템에 적용하는 속성들

2.1 flex-basis 아이템의 기본 크기

flex-basis: auto (default) | 1 (숫자 값)

flex-basis는 중심축을 기준으로 flex 아이템의 기본 크기를 설정한다.

( flex-direction: row; 일 때는 너비, flex-direction: column 일 때는 높이 )

예를 들어 flex-direction: row 일 때 flex-basis: 100px은 아이템의 width가 100px이 되고

flex-direction: column 일 때 flex-basis: 100px은 아아템의 height가 100px이 된다.

grow나 shrink를 사용해서 아이템이 늘어나거나 줄어들 때의 기준이 된다.

주의할 점
어디까지나 '기본 크기'를 설정하는 값이다.
아래 이미지는 각 item에 flex-basis: 100px;을 주었는데 원래 너비가 100px이 넘지 않았던 item1, item2는 100px이 되었지만 원래 너비가 100px이 넘던 item3은 그대로 유지된다.

2.2 flex-grow 늘어나는 비율

flex-grow: 1 (숫자 값)

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다.

속성 값으로 숫자가 들어가는데, 몇이든 0보다 큰 값이 세팅되면 해당 아이템은 유연하게 늘어나는 박스로 변하고 원래의 크기보다 커지며 빈 공간을 채우게 된다.

기본값이 0이기 때문에 따로 적용하기 전까지는 아이템이 늘어나지 않는다.

주의할점
flex-grow에 들어가는 숫자는 아이템 자체 너비의 비율이 아니라,
flex-basis(아이템 너비)를 제외한 여백 부분의 비율이다.

출처 1분코딩

아이템 자체 너비의 비율을 설정하고 싶다면 단축 속성인 flex를 사용하는 것이 좋다.

2.3 flex-shrink 줄어드는 비율

flex-grow와 쌍을 이루는 속성으로 아이템이 flex-basis 값보다 작아질 수 있는지를 결정한다.

grow와 마찬가지로 속성 값으로 숫자가 들어가는데, 몇이든 0보다 큰 값이 세팅되면 해당 아이템은 유연한 박스로 변하고 flex-basis 보다 작아진다.

기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있었다.

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정된 너비의 아이템을 만들 수 있다.

2.4 flex (flex-grow flex-shrink flex-basis 단축속성)

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성이다.

이 세가지 속성들은 관련이 깊기 때문에 단축 속성인 flex를 쓰는 편이 편하다.

2.5 align-self 수직축으로 아이템 단독 정렬

align-self: auto | strecth | flex-start | flex-end | center | baseline

align-items가 전체 아이템들을 정렬했다면, align-self는 여러 아이템 중 하나의 아이템만 골라서 수직축으로 정렬할 수 있다.

컨테이너에 align-items: flex-start; 가 적용되있고 세 번째 위치한 아이템만 따로 align-self: flex-end;로 세팅하면 아래와 같은 이미지처럼 배치된 모습을 볼 수 있다.

2.6 order 아이템 배치 순서

order: 0 (default) | 1 (숫자값)

각 아이템들의 시각적 나열 순서를 결정하는 속성이다.

속성값으로 숫자가 들어가며 작은 숫자일 수록 먼저 배치된다. 기본값으로 0을 가지고 있기 때문에 -1을 써주면 다른 아이템들보다 먼저 배치 될 수 있고, 1을 써주면 다른 아이템들보다 뒤에 배치될 수 있다.

주의할 점
어디까지나 "시각적"으로 보여지는 순서가 변경 될 뿐이므로 HTML 자체의 구조가 바뀌는게 아니라서 접근성 측면에서 사용에 주의해야한다. 스크린 리더로 화면을 읽을 때, order로 바꾼 순서는 소용이 없다.

1주차 수업 : float

jwss — Tue, 6 Dec 2022 18:36:36 +0900

⏬ 목차

1-1. 시멘틱 태그란?
1-2. 시멘틱 태그 사용시 장점
1-3. 어디에 사용할지 헷갈리는 시멘틱 태그
2. padding vs margin
3-1. 블록요소 vs 인라인 요소 vs 인라인 블록요소
3-2. 인라인 블록 요소의 여백
4. css 명시도 (우선순위)
5. css 속성 작성순서
6. 성질을 변하게 만드는 속성
7. % 와 px의 차이
8. 가운데 배치
9. 리셋 속성 단축 키워드
10. 기타 css 속성 단축 키워드
11. Emmet
12. vscode 단축키
이번 수업으로 알게된 점

1주차는 float로 레이아웃 배치하는 것에 대해 중점적으로 배웠다.

지금은 flex를 주로 사용하지만 유지보수 할 때, float으로 정렬된 프로젝트들도 있기 때문에 알아야한다.

시멘틱태그가 등장하기 이전에는 <table>, <div> 로 마크업을 많이 했는데 (컨트롤이 편하다는 장점이 있음)

의미론적으로는 아무런 뜻이 없기 때문에 <header> 나 <main> 등의 시멘틱 태그를 사용한다.

1-1. 시멘틱 태그란?

의미론적인 태그.

1-2. 시멘틱 태그 사용시 장점

협업에서의 이점
직관성
seo(검색엔진최적화)에서 좋은 점수
접근성

⏩ 시멘틱 태그를 써야하는 이유 자세히 보기

[HTML] 시맨틱 태그란? 왜 시맨틱태그를 써야하는가

HTML을 배우게 되면 초반에 접하게 되는 것이 시멘틱 태그인데 "시멘틱태그를 써야한다!"는 이야기는 너무나도 많이 들어봤지만, 정작 왜 사용하는지에 대한 이해가 부족한 것 같아 다시 한 번 정

jwss.tistory.com

1-3. 어디에 사용할지 헷갈리는 시멘틱 태그

<article> : 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.

<section> : 논리적으로 관계 있는 문서 혹은 요소를 구분할 때 사용한다.

<div> : 요소간 논리적 관계와는 상관없이 요소를 나눠야할 때 사용한다.

1-4. <article> vs <section>

형광펜 표시된 부분은 공통점

<article>

1. 내용이 독립적이다.

2. 하위요소로 제목(h1~h6)을 포함하고 있어야한다.

3. 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화

4. 사이트 안에서 독립적으로 구분해 배포 / 재사용 할 수 있는 구획에 사용한다.

5. 게시판, 블로그 글, 매거진, 뉴스 기사 등에 사용한다.

6. <header> 요소와 <footer> 요소를 포함하기도 한다.

<section>

1. 논리적으로 관련된 집합체

2. 하위요소로 제목(h1~h6)을 포함하고 있어야한다.

3. <header> 요소와 <footer> 요소를 포함하기도 한다.

서로 관련 있는 내용을 모아놓는 <section> 안에 각각 독립된 내용을 가지는 <article>이 여러 개 들어가는 것은 부자연스러울 수 있다.

<article> 안에 <section>이 들어가는 것이 자연스럽다.

콘텐츠가 독립된 자체만으로도 의미가 있는가? ➡ <article> 사용
콘텐츠가 주제에 관련된 것인가? ➡ <section> 사용
콘텐츠가 각각 의미론적으로 관련이 없는가? ➡ <div> 사용

2. padding vs margin

패딩은 내부 여백, 내 영역

마진은 외부 여백, 내 영역이 아님

3-1. 블록요소 vs 인라인 요소 vs 인라인 블록요소

	기본 너비값	요소 배치	너비값, 높이값	마진, 패딩
블록 요소	100%	수직 배치	가질 수 있음	가질 수 있음
인라인 요소	콘텐츠 너비값	수평 배치	가질 수 없음	상하마진 가질 수 없음 (좌우마진, 상하좌우 패딩은 가질 수 있음)
인라인 블록요소	콘텐츠 너비값	수평 배치	가질 수 있음	가질 수 있음

⏩ 블록요소, 인라인요소, 인라인블록요소 차이 자세히 보기

[CSS 기초] 블록 요소(block element) ve 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element)

HTML의 요소는 블록 요소와 인라인 요소, 인라인블록 요소로 분류된다. 블록 요소 (block element) 기본 너비값이 100% (폼 엘리먼트 제외) 너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다.

jwss.tistory.com

3-2. 인라인 블록 요소의 여백

(1) 인라인 블록요소 양옆 4px 여백

<span>인라인블록</span>
<span>인라인블록</span>
<span>인라인블록</span>
<span>인라인블록</span>

인라인 블록요소는 내가 간격을 주지 않아도 자동으로 간격이 들어간다. 이것은 줄바꿈 때문에 생기는 것이다.

span 태그 다음 엔터를 치면서 자연스럽게 공간이 생기는데 엔터를 치지 않고 태그를 쭉 이으면

 <span>인라인블록</span><span>인라인블록</span><span>인라인블록</span><span>인라인블록</span>

사이 여백이 없어지게 된다.

(2) 인라인 블록요소에 overflow: hidden을 주게 될 경우

인라인블록 요소 (노란색 요소) 하단에 여백(회색부분)이 생김

display: inline-block 요소에 overflow: hidden을 주게 되면 하단에 여백이 생기는데,

이것은 vertical-align: top / middle / bottom 중 하나를 주면 사라진다.

4. css 명시도 (우선순위)

명시도란 브라우저가 특정 요소와 가장 연관된 속성을 찾는 수단으로, 명시도 점수가 높음에 따라 스타일이 적용되는 우선순위가 높아진다.

태그: 1점
클래스: 10점
가상클래스: 10점
아이디: 100점

+ 구조 가상클래스 nth-child

nth-child(n+4) : 4이상

nth-child(-n+4) : 4이하

- 가 붙냐 안붙냐로 이상 이하를 결정한다.

5. css 속성 작성순서

css 속성 작성순서

6. 성질을 변하게 만드는 속성

position: fixed / position: absolute / flaot는 적용 시 요소가 인라인블록 요소로 변한다.

즉, 블록요소에 적용한다면 100%를 차지하던 너비가 콘텐츠 너비만큼으로 바뀌고 (너비를 따로 설정하지 않았을 경우)

상하마진을 가질 수 없는 인라인 요소는 너비값, 높이값, 상하마진을 가질 수 있게 된다.

예를 들어, span은 인라인요소기 때문에 너비와 높이를 가질 수 없다.

하지만 position: absolute / position: fixed / float를 주면 인라인블록 요소의 성질을 가지기 때문에 스타일을 적용시킬 수 있다.

7. % 와 px의 차이

%는 기준이 있어야한다. %로 높이를 주고싶다면 부모의 높이가 있을 때 사용 가능.

px의 기준은 윈도우 창이기 때문에 기준이 필요하지 않다.

8. 가운데 배치

text-align: center는 인라인, 인라인 블록 요소만 가운데로 이동한다. (수평)
position으로 요소를 가운데 배치할 경우 요소의 왼쪽 상단이 위치의 기준이 되므로, top: 50%; left: 50%; transform: translate(-50%, -50%) 를 해줘야한다. (수평 ,수직)

이미지 비율이 망가지면 img 태그에 objec-fit: cover 사용

9. 리셋 속성 단축 키워드

m0 		-> margin:0 
p0 		-> padding:0

lisn		-> list-style: none

tdn		-> text-decoration: non

fi 		-> font inhrit 기본 폰트 설정을 상속받는다.

cri		-> color inhrit 본 폰트 컬러를 상속받는다.

lh1		-> line-height: 1; 기본 폰트 사이즈만큼 행간을 설정한다.

maw100p		-> max-width: 100%

10. 기타 css 속성 단축 키워드

w100		-> width: 100px
W100p		-> width: 100%

h100		-> height: 100px
h100p:	 	-> height: 100%

mb10		-> margin-bottom: 10px
mr10		-> margin-right: 10px
m10-10-10-10	-> margin 10px 10px 10px 10px
m0-a		-> margin 0 auto

db		-> display: block
di		-> display: inline
dib		-> display: inline-block

bgc#f00 -> background-color: #f00

tac		-> text-align: center
vat		-> vertical-align:top



fz50	-> font-size: 50
fwb		-> font-weight: bold

lc		-> last-child

por		-> position: relative
poa		-> position: absolute
pof 	-> position:fixed

t50p 	-> top:50%
l50p 	-> left:50%


tftl 	-> transform:translate(x,y)
tftx 	-> transform:translateX(x)
tfty 	-> transform:translateY(y)

bdrs50p	-> border-radius: 50%

11. Emmet (Zen Co ding)

ID, CLASS 속성
div#page.section.main
<div id="page" class="section main"></div>



엘리먼트 복제
li*3
<li></li><li></li><li></li>


넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
li.item$*3
<li class="item1"></li><li class="item2"></li><li class="item3"></li>
 

li.item$$$*2
<li class="item001"></li><li class="item002"></li>



텍스트
p>{click}
<p>click</p>

12. vscode 단축키

alt shift 아래키: 밑으로 복사
alt 누르고 마우스로 선택: 커서 다중 선택
드래그 하고 control + d: 동일한 모양을 다중 선택
드래그한 다음, alt + 아래키 : 복사 이동
shift + w : 태그로 묶기
control shift p : 설정

이번 수업으로 알게된 점

- article 태그

국비 수업 때는 section 태그만 줄줄히 쓰고 article 태그를 써 본 적이 없어서 용도를 잘 몰랐었는데 이번 기회에 제대로 알게 됐다.

- 인라인블록 양옆 여백, overflow:hidden 시 생기는 아래여백

인라인블록 양 옆에 생기는 여백은 그냥 인라인블록이 갖는 특성인줄 알았는데 엔터 때문에 생기는 여백이었다니

그리고 인라인블록 요소만 overflow: hidden을 주면 아래에 여백이 생기는데 이걸 vertical-align으로 잡는 것도 처음 알았다.. text-align은 자주 쓰는데에 비해서 vertical-align은 묘하게 쓸 곳이 없네 라고 생각했는데 이런 곳에 쓰는구나.

- 성질을 변하게 만드는 속성

position: absolute / position: fixed를 적용하면 요소가 인라인 블록 성질로 변한다는 건 인터넷 강의를 통해서 알고 있었는데 float도 그런지는 몰랐다. 레이아웃 짜는데 헷갈리게 만드는 3대장 아닐까

- 명시도

명시도에 대해서는 처음 들어봤다. 대충 셀렉터 우선순위가 있는건 알았는데 이걸 따로 명시도라고 부르는 명칭이 따로 있다는걸 알게됐다.

- 빠른 코딩방법

시안 보고 이걸 15분 내에 친다는걸 듣고 이게 되나? 했는데 속성 단축 키워드나 에밋을 활용하니 이게 된다. 신기하네..

속성 단축 키워드는 이제 어느 정도 익숙해진 것 같은데 에밋이나 vscode 단축키 같은 건 좀 더 익숙해져야 할 것 같다.

7분에 쳤다는 사람도 있다던데 그 사람 손가락이 스무개인거 아닌지

첫 수업이라 아는 내용도 많아서 따라갈만 했는데 나중 수업이 얼마나 하드할지 어렴풋이 보여서 살짝 걱정 됐다.

확실히 수업 속도가 빠르고 국비 수업에 비해서 중요한 요소, 실무에 필요한 요소 쏙쏙 골라서 수업에 압축 시킨 느낌이다. 수업을 녹화로 다시 볼 수 있기도 하고 정리된 노션 글도 있어서 체계적이라고 느꼈다. 나만 잘하면 되겠다^^ㅜ..........