Publishing to CodingApple
코딩애플 강의를 통해 배운 Publishing을 정리한 글입니다.
📅 작성일
2025년 2월 14일
📌 목차
- 소개
- part1-1 : part1-1 HTML 기초와 개발환경 셋팅
- part1-2 : HTML 기본 태그로 글 작성해보기
- part1-3 : 기본적인 웹페이지 스타일링
- part1-4 : CSS 파일 만들고 첨부하는 법
- part1-5 : 웹레이아웃의 기초 : div를 이용한 네모네모 박스 디자인
- part1-6 : 레이아웃 만들기 1 : 호환성 좋은 float
- part1-7 : 레이아웃 만들기 2 : 귀찮은 inline-block
- part1-8 : 레이아웃 만들기 숙제 : Blog 글목록 만들기
- part1-9 : 셀렉터를 이용해 CSS 코드 양 줄이기
- part1-10 : 배경 이쁘게 넣는 스킬들 & margin collapse
- part1-11 : position과 좌표 레이아웃 만들기
- part1-12 : position 숙제 & 반응형 width & box-sizing
- part1-13 : form & input
- part1-14 : form & input 숙제 : Contact Us 섹션 만들기
- part1-15 : 쓸데 많은 Table 레이아웃과 vertical-align속성
- part1-16 : Table 레이아웃 숙제 : Cart 페이지 만들기
- part1-17 : pseudo-class로 인터랙티브 버튼 만들기
- part1-18 : 코드양이 줄어드는 class 작명법 (OOCSS, BEM)
- 참고 자료
📝 소개
Part 1 : 기초모듈
part1-1
🔹 HTML
- 웹 페이지 만들 때 사용
- Hypertext Markup Language의 약자
- Markup 언어
🔹 세팅 및 실행
- Extention에서 live server 설치
- html우클릭 후 open with live server
part1-2
🔹 태그
- 글을 작성할 때는 태그 사이에 적어야한다
- 태그안에 넣는다 : 웹 표준을 잘 지킨다
part1-3
🔹 기본적인 스타일의 설명
- 이미지 가운데 정렬
display: block; margin-left: auto; margin-right: auto; - 폰트 스타일링 가능
font-family - 자간조정 기능
letter-spacing
part1-4
🔹 css
- Cascading Style Sheet (스타일 보관파일)
🔹 셀렉터의 우선순위
style="" (1000점)
#id (100점)
.class (10점)
p (1점)part1-5
🔹 box에서 자주쓰는 스타일링
border: 4px solid black (두께, 선의 종류, 색)
display : block (가로행을 전부 차지한다)🔹 inherit
- 일부 스타일은 자동으로 부모에 적은 스타일링이 자식에게도 전달된다
part1-6
🔹 Wrapper or Container
- 화면구성 전, 화면전체를 감싸는 박스를 하나 만들어두는게좋다
🔹 float
- 요소를 띄워서 배치시킴 (left or rigth)
- float후에 오는 요소는 clear (left, right, both)를 사용하여 배치한다
part1-7
🔹 inline-block
- 내 크기만큼 차지 (태그사이에 공백도 width를 포함함)
inline인경우vertical-align사용이 가능- 실용적이진 않은거같음
part1-8
🔹 숙제
part1-9
🔹 태그 명
- 각 역할에 맞는 태그 쓰는게 좋다 (nav, footer 등등)
🔹 셀럭터 사용법
클래스명 안에있는 태그에 스타일 적용
.navbar li {
display: inline-block;
}클래스명 안에있는 직계자식태그
.navbar>li {
display: inline-block;
}part1-10
🔹 백그라운드 이미지 스타일링
background-image: url(../img/shoes.jpg);
/* 배경 이미지 적용 */
/* 여러 개의 이미지 사용 시 쉼표(,)로 구분하여 겹쳐서 표현 가능 */
background-size: cover;
/* 요소의 크기에 맞춰 배경을 꽉 채움 */
/* 비율이 유지되며 잘릴 수도 있음 */
background-size: contain;
/* 배경이 잘리지 않도록 조절 */
/* 요소 크기 안에서 비율을 유지하며 맞춤 */
background-repeat: no-repeat;
/* 이미지 반복 없이 한 번만 표시 */
background-position: center;
/* 이미지를 요소의 가운데 정렬하여 배치 */
filter: brightness(70%);
/* 밝기 조절 (단, 내부 요소도 함께 적용됨) */
background-attachment: fixed;
/* 스크롤 시 배경을 고정하거나 다양한 방식으로 동작하도록 설정 */
🔹 margin collapse
- 두 요소의 테두리가 겹쳐있을 때 마진이 하나로 합쳐지는 현상
- 테두리 안붙게 하면된다
part1-11
🔹 position
position: relative;
/* 현재 요소를 기준으로 top, bottom, left, right 값을 사용하여 이동 가능 */
/* 원래 위치에서 떠 있는 상태 (공중에 있는 느낌) */
position: static;
/* 기본값 (위치 이동 불가) */
/* top, bottom, left, right 적용 불가능 */
position: fixed;
/* 뷰포트를 기준으로 고정 (스크롤해도 움직이지 않음) */
/* 예: 항상 보이는 메뉴바 */
position: absolute;
/* 부모 요소를 기준으로 이동 (단, 부모가 position: relative를 가져야 함) */
/* relative가 없는 경우 body를 기준으로 배치됨 */
part1-12
🔹 z-index
- 높을수록 앞에온다
- 비교대상 둘다
position스타일링을 써야한다
🔹 반응형
- 반응형은 대부분 %를 사용한다
max-width등등
🔹 box-sizing
- padding, border포함 사이즈 측정하기
box-sizing: border-box
🔹 normalize.css
- 브라우저마다의 호환성 있도록 하는 CSS
- 각 브라우저마다 UI가 다르게 보이는것을 없애준다
- normalize.css
part1-13
🔹 form
- 서버관련 태그
🔹 input
- 여러가지 타입이 있다
input[type=text]같은 문법으로도 css적용가능
part1-14
🔹 숙제임
part1-15
🔹 table
/* table 사용 시
표 사이의 간격을 없애준다 */
border-collapse: collapse;
/* inline/ inline-block일때사용
table같은경우에는 top middle bottom밖에 못준다*/
vertical-alignpart1-16
🔹 nth-child
/* 순서마다 스타일링을 줘야할 때 사용 */
div:nth-child(2)
/* 테이블 열 합침 */
colapsepart1-17
🔹 pseudo-class
- 상태에 따라서 스타일을 줄 수 있음
🔹 스타일링
hover: 마우스 갖다댔을때active: 클릭했을때focus: 포커스됬을 때 (인풋 클릭 시 테두리 변할 때 사용)- 순서는 h f a 순으로 적기
- 방문적 링크와 방문 후 링크는
link, visited순으로 적용
part1-18
🔹 Object Oriented CSS
- 유틸리티 스타일링
- CSS작성 시 뼈대와 살점을 만들어 편리하고 유지보수 하기 좋게 만든다
🔹 BEM
- Block_Element--Modifier 의 약자
- 클래스명 작성할 때 창의력이 딸리는경우에 사용하는 기법
- class="덩어리이름__역할--세부특징" > 대부분 근데 덩어리-역할 이런식으로함
📚 참고 자료
작은 코드 하나에도 책임을 담는 개발자입니다!