Lesson - 웹 개발 이해하기
- HTML : 웹페이지의 구조를 담당하는 markup 언어
- CSS : 디자인 요소를 시각화하는 스타일 시트 언어
- JavaScript : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용해주는 프로그래밍 언어
Lesson - HTML 기초
HTML 태그는 수많은 종류가 존재하지만 핵심 태그만 암기하고 차차 외워가기로 한다.
- div: 한 줄을 차지
- span: 컨텐츠 크기만큼 공간을 차지
- img: src 속성을 사용하여 이미지 삽입
- a: 링크 삽입, target사용 시 새 tab에서 링크 활성화
<a href="https://codestates.com" target="_blank">코드스테이츠</a>- ul: un-ordered list, 점으로 나타나는 리스트
- ol: ordered list, 넘버링 리스트
- li: ul, ol의 트리구조에 들어가는 list
- input: type="text", "passwaord", "checkbox", "radio" 등의 입력폼
Note: radio 버튼은 name이라는 속성을 사용하여 하나의 그룹으로 만들어야 택1이 가능하다.
- textarea: 줄바꿈이 가능한 입력 form
- button
Note: self-closing tag: 태그 내부에 내용이 없다면 closing tag를 생략 가능하다.
<img src="abcd.png" /> <handleReview /> // 리액트에서 프롭스 없이 함수 컴포넌트를 내려주는 경우
Lesson - CSS 기초
CSS 파일 작성
앞서 말했듯이 css는 스타일링을 담당하지만 단순히 디자인만을 고려하지는 않는다.
- 적당한 위치에 콘텐츠 배치 (레이아웃)
- 텍스트 강조와 같은 최소한의 타이포그래피(조판, typography)
- 최소한의 접근성 (예를 들어 색상)
위 세가지 요소를 갖추어야 더 나은 사용자 경험(UX)를 가질 수 있다.
Note: UI, UX는 트렌드에 맞게 변화하므로 최신 동향을 살펴보고 적용해야 한다.
css 속성은 수많은 종류가 있으며, css 파일을 정의하는 문법이나 라이브러리도 무궁무진하다.
다만, 기본에서 크게 벗어나지 않으므로 핵심 기능부터 정리하고 Codestates 리뷰 이외의 항목은 TIL을 통해 정리하는 것으로 한다.
ex) color, font-size, text-align, background-color 등
background vs background-color?
background 태그의 종류 중 하나가 background-color임
둘 다 색상을 지정할 수 있지만 background 태그는 repeat, position, image 등을 사용할 수 있다.
따라서 색상을 지정할 경우 명시적으로 background-color를 사용하는 것이 가독성 측면에서 도움이 된다.
CSS 파일 추가
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />이처럼 여러 css 파일을 추가하여 반응형 웹사이트를 구현할 수 있다.
미디어 쿼리
id vs class
text styling
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
font-size: 24px; /* 글자 크기 */
font-weight: ~~ /* 굵기 */
text-decoration: ~~ /* 밑줄, 가로줄 */
letter-spacing: ~~ /* 자간 */
line-height: ~~ /* 행간 */
text-align: center; /* 텍스트 정렬 */
}- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
Note:
1. 절대적이고 확실한 크기로 정하고 싶을 때px(픽셀)을 사용. 다만, px은 접근성에 불리하다. 이 말은 곧 CSS를 통해 글꼴 크기는 고정되기 때문에, 작은 글씨를 보기 힘든 사용자가 브라우저 기본 글꼴 크기를 더 크게 설정했다 하더라도 이런 설정이 무시되는 단점이 있다. 결과적으로 개발자가 강조하려던 제목(heading) 등이 오히려 일반 텍스트보다 작게 보이는 결과를 초래할 수 있다. 또한 px은 모바일 기기와 같이 작은 화면이면서 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력될 수 있다. px은 화면 크기가 절대적인 경우에 (예를 들어 출력용) 유리함.
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 및 height를 의미한다. 간혹 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 본 적이 있을텐데, 이는 100vw, 100vh를 사용해 구현한 것이다. (참고로
body태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율임.)
box-model
모든 콘텐츠는 각자의 영역이 존재한다. 이러한 영역을 활용하여 화면의 레이아웃을 구성할 수 있다. 부트 스트랩과 같은 유료 컨텐츠를 활용하면 그럴싸한 화면 구성을 손쉽게 얻을 수 있으나 그것은 개인의 역량 발전과 무관하므로 본 포스트에서는 지양하고자 한다.
추후 서비스 상용화시 부트스트랩 사용을 고려할 수는 있겠다.
Note: 박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 넣는 것이 좋다.
- 줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
예를 들어, 줄바꿈이 되는 태그는<h1><p>이고, 줄바꿈이 되지 않는 태그는<span>이라면, 전자는 block 박스이며 후자는 inline 박스임을 알 수 있다.
span {
background: yellow;
display: inline-block;
width: 100px;
height: 100px;
}
box-model parameters
- border: 테두리는 심미적으로도 필요하지만, 개발 과정에서도 매우 의미있게 사용된다. 각 영역이 해당하는 크기를 알기 위해서 보통 레이아웃을 만들 때에 다음과 같이 그 크기를 시각적으로 확인할 수 있도록 만든다.
- margin: 박스 바깥 여백
- padding: 박스 안쪽 여백
p {
border: 1px solid red; // 각각 border-width, border-style, border-color
margin: 10px, 20px, 10px, 20px;
padding: 10px, 20px;
overflow: auto;
// 컨텐츠가 넘치는 경우: hidden, overflow-x, overflow-y 등
}box-model calculation
박스 크기를 측정하는 기준은 매우 중요하다. 아래와 같은 박스 크기를 가정할 때,
#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;
}#container의 너비는 300px이 아니라 324px이다.
300 (콘텐츠 영역)
- 10 (padding-left)
- 10 (padding-right)
- 2 (border-left)
- 2 (border-right)
#inner의 width:100%는 300px이 아니라 364px이다.
300 (300px의 100%)
- 30 (padding-left)
- 30 (padding-right)
- 2 (border-left)
- 2 (border-right)
이러한 박스 계산법은 레이아웃을 어렵게 만드므로, 여백과 테두리 두께를 포함하는 박스 계산 방법 스타일을 전역으로 추가한다. 이렇게 되면 300px은 모든 여백과 테두리를 포함한 크기로 계산된다.
* {
box-sizing: border-box;
}Note: CSS에 box-sizing:border-box 속성을 주고 width와 height를 갖게 해주면 padding이나 border 값이 달라도 결과적으로 박스 크기는 같아진다.
