Publishing Part2

남재상·2025년 2월 20일

publishing

Publishing to CodingApple

코딩애플 강의를 통해 배운 Publishing을 정리한 글입니다.

📅 작성일

2025년 2월 20일

📌 목차

소개
part2-1 : HTML CSS 웹폰트 넣는 법과 안티앨리어싱
part2-2 : 레이아웃 만들기 3 : 편리한 Flexbox
part2-3 : HTML CSS 코드짤 때 유용한 Emmet 그리고 부가기능들
part2-4 : head 태그에 들어갈 내용 정리
part2-5 : 반응형 레이아웃 만들기
part2-6 : 반응형 레이아웃 숙제 : 가로정렬 레이아웃
part2-7 : 개발자도구 잘쓰기, 브라우저 호환성
part2-8 : Font Awesome 아이콘 넣기
part2-9 : Transition 속성으로 CSS 애니메이션 구현하기
part2-10 : Portfolio 실습 1 : Landing Page
part2-11 : Portfolio 실습 1 : Landing Page (해설편)
part2-12 : Bootstrap 설치와 사용법
part2-13 : Bootstrap Grid 레이아웃
part2-14 : Bootstrap Grid 레이아웃 숙제 해설
part2-15 : CSS 덮어쓰기 잘하는 법 & 어떤 코드가 좋은 코드인가요
part2-16 : Portfolio 실습 2 : SNS Profile
part2-17 : Portfolio 실습 2 : SNS Profile (해설편)
참고 자료

📝 소개

Part 2 : 중급모듈

part2-1

🔹 @font-face

폰트파일을 css에서 사용가능하게 등록
ttf는 너무 크니까 웹 모드는 woff를 사용하자
한글폰트는 엄청 크니까 적게사용하자

🔹 font-weight

그냥 주면 안이쁘니까 font-family에 font-weight를 작성해주자
혹은 각 텍스트에 주는것도 좋음

🔹 구글폰트

fonts.google.com

🔹 폰트를 줬을 떄 깨지는 현상

transform: rotate(0.03deg) 정도를 주면 깨짐이 덜하다.

part2-2

🔹 Flexbox

/* display: flex; 를 하면 쉽게 요소를 가로에 둘 수 있다 */
display: flex;

/* flex를 사용한 요소에서 사용 가능 */
justify-content: center; /* 가운데 정렬 */
justify-content: flex-end; /* 오른쪽 정렬 */
justify-content: flex-start; /* 왼쪽 정렬 */
justify-content: space-between; /* 사이 간격 정렬 */

/* row, column을 사용하여 가로 세로 배치가 가능하다 */
flex-direction: row;
flex-direction: column;

/* 넘치면 밑으로 가기 */
flex-wrap: wrap;

/* flex 부모 밑의 요소를 위아래로 정렬 가능 */
align-items: center;
align-items: flex-start;
align-items: flex-end;

/* 배수만큼 칸을 차지하는데, 주로 헤더의 로고와 메뉴바 사이 간격을 벌릴 때 사용 */
flex-grow: 1;

part2-3

🔹 재밌는 부가기능

Power Mode, Emmet

part2-4

🔹 head

<!-- CSS 파일 연결 -->
<link href="css/main.css" rel="stylesheet" />

<!-- 사이트 제목 -->
<title>네이버입니다</title>

<!-- 인코딩 형식 -->
<meta charset="UTF-8" />

<!-- 사이트의 검색 결과 화면에 뜨는 글귀 -->
<meta name="description" content="html 잘하는 코딩애플입니다." />

<!-- 구글 검색 시 파란 제목으로 뜨는 글귀 -->
<meta name="keywords" content="HTML,CSS,JavaScript,자바스크립트,코딩" />

<!-- 사이트 초기 zoom 레벨이나 폭 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- initial-scale=1 이 부분은 접속 시의 화면 줌 레벨 -->

<!-- Facebook이 만든 Open Graph(og) 메타태그 -->
<meta property="og:image" content="/이미지경로.jpg" />
<meta property="og:description" content="사이트설명" />
<meta property="og:title" content="사이트제목" />

<!-- 아이콘 설정 -->
<link rel="icon" href="아이콘경로.ico" type="image/x-icon" />

part2-5

🔹 단위

/* 브라우저 폭에 비례 */
vw

/* 브라우저 높이에 비례 */
vh

/* 기본 폰트사이즈에 비례 (1rem = 16px)
이전에는 폰트 확대하는 기능 때문에 사용을 했었다
디자인할떄 px외우기 귀찮을 때 사용*/
rem

🔹 media query

반응형을 만들 떄 사용
1200px (테블릿) 768px 576px(모바일)

/* 1200px 이하일때 이 스타일 적용 */
@media screen and (max-width: 1200px);

part2-6

🔹 하면서 꺠달은점

height는 웬만하면 auto로
flex-direction 사용 많이해보기

part2-7

🔹 개발자 도구 사용하기

주황색 : margin
파랑색 : content
초록색 : padding

🔹 호환성

익스플로러 X 버전 이하에서만 적용할 수 있는 CSS파일을 첨부

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

part2-8

🔹 cdn

fontawesome

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

part2-9

🔹 transition

transition: 스타일 초s : 스타일이 변하면 초만큼 서서히 변경한다 (스타일은 all로 줘도된다)
transition-timing-function :점점 빠르게 or 점점 느리게 스타일 변화를 줄 수 있음

part2-10

🔹 .test:hover .test2{}

Hover 시 특정 클래스에 영향을 주어 다른 클래스의 스타일을 변경할 수 있다.

part2-11

🔹 하면서 느낀점

box-size 잘 체크하기 padding 잘 주기

part2-12

🔹 해설편

part2-13

🔹 유틸리티 쓸만한게 많아보임

part2-14

🔹 반응형 레이아웃

row col : col-숫자를 통해서 간격을 나눌 수 있음 (row가 최대12쪼갬)
col-반응형-숫자 : 반응형으로 저 숫자만큼 쪼개며 스타일링을 적용한다
(xl = 1200px) (lg = 992px) (md = 768px) (sm = 576px)
order-숫자 : 요소들의 순서를 정할 수 있음, (order-반응형-숫자) 이런것도 가능

🔹 반응형 만들 때 팁

부트스트랩을 쓸 때는 모바일 레이아웃먼저 만들면 쉽다

part2-15

🔹 배운점

반응형에 사용하기 좋은 셀렉터는 일단 나중에 내 전용을 만든다고 하더라도 많이 사용해보자

part2-16

🔹 CSS덮는법

그냥 같은 클래스명 하단에 쓰기 => 더 밑에 작성된게 적용이 된다 (가끔 안될 수 있음)
우선순위 높이기 => 아이디 적기 or !important; 를 적용한다 (우선순위가 제일높음)
specificity 높이기 => 위에 부모 클래스나 자식클래스나 이런거를 하나 더 덮는다

🔹 좋은코드

수정관리가 쉬움
확장성이 좋음
양이 적음

🔹 부트스트랩

웬만하면 수정을 안한다
클래스를 추가하는게 좋다

part2-17

🔹 부투스트랩 잘 찾아보자

📚 참고 자료

남재상

작은 코드 하나에도 책임을 담는 개발자입니다!

이전 포스트

TypeScript Part2

다음 포스트

Publishing Part2

Publishing to CodingApple

📅 작성일

📌 목차

📝 소개

part2-1

🔹 @font-face

🔹 font-weight

🔹 구글폰트

🔹 폰트를 줬을 떄 깨지는 현상

part2-2

🔹 Flexbox

part2-3

🔹 재밌는 부가기능

part2-4

🔹 head

part2-5

🔹 단위

🔹 media query

part2-6

🔹 하면서 꺠달은점

part2-7

🔹 개발자 도구 사용하기

🔹 호환성

part2-8

🔹 cdn

part2-9

🔹 transition

part2-10

🔹 .test:hover .test2{}

part2-11

🔹 하면서 느낀점

part2-12

🔹 해설편

part2-13

🔹 유틸리티 쓸만한게 많아보임

part2-14

🔹 반응형 레이아웃

🔹 반응형 만들 때 팁

part2-15

🔹 배운점

part2-16

🔹 CSS덮는법

🔹 좋은코드

🔹 부트스트랩

part2-17

🔹 부투스트랩 잘 찾아보자

📚 참고 자료

TypeScript Part2

Vue Part2

0개의 댓글