OT와 github 초기셋팅이 끝나고 다음 주차부터는 본격적으로 기본적인 웹개발 과정에 들어가게 되었습니다
우선 첫 수업은 HTML과 CSS에대해 배우게 되었는데 오래 전 과거 이미 배운과정이여서 내가 알고있는 개념이 제대로된
내용인지 크로스체크하는 방향으로 공부를 시작해야겠다 생각했습니다 그래서 기초적인 태그가 아닌 제가 들으면서 비교해본 내용과 새롭게 알게된 점 들을 작성해볼까합니다
HTML 이란 하이퍼 텍스트 마크업 랭귀지 라는 뜻으로 웹페이지의 구조를 구성하는 마크업 언어입니다
과거와는 달리 HTML5가 발표되고 나서는 구조를 설계 할때 사용한 태그의 의미를 굉장히 중요시하게 되는 분위기로 바뀌게 되었는데요 물론 과거에도 무의미한 태그는 지양하는 방향으로 코딩이 되었지만 현재는 시멘틱 태그로 마크업 언어에서 태그명으로 지정하여 사용될 수 있도록 지원하고있습니다
CSS란 케스케이딩 스타일 시트의 약자로 HTML로 마크업된 페이지의 스타일을 입혀주기 위한 하나의 언어입니다
보통 CSS을 사용할때는 link 방식을 사용하여 외부의 CSS파일을 불러오는 방식으로 사용하지만 다양한 방법을 나열해보자면 인라인방식, 내장스타일태그방식, 외부link방식, @import 방식 이렇게 4가지 방식이 있지만 실제로 주로 사용하게 되는 방식은 외부 link방식입니다 import방식은 css에서도 사용가능하지만 주로 웹폰트나 sacc같은 다른 방식의 스타일시트를 작성할때 사용됩니다
CSS작성방법은 아래에서 다뤄보고 우선 HTML에 대해 살펴보겠습니다
Semantic 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시멘틱 태그</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#"></a></li>
</ul>
</nav>
</header>
<main>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside>
</aside>
</main>
<footer></footer>
</body>
</html>위 코드에 사용된 코드 외에도 더 상세한 시멘틱 태그들이 있으나 크게 레이아웃 틀을 잡을때 사용하는 시멘틱 태그로 구성해봤습니다 과거엔 table 태그로 구조가 만들어졌지만 이후엔 div 태그로 현재는 header, main, footer, section 태그로 큰 틀이 잡히게 됩니다 그렇다고해서 div 태그를 완전히 안쓰냐? 그건 또 아닙니다 간단하고 심플함을 추구하고 복잡한 내용이 들어가지 않는다면 충분히 시멘틱 태그만으로도 구조를 잡을 수 있겠지만 요즘 웹사이트는 더 많은 정보를 제공하면서 복잡한 애니메이션, 기능들이 추가되면서 시멘틱 태그만으로는 웹사이트를 만들 수 없습니다 그래서 큰 틀만 시멘틱 태그로 작성해왔습니다
그래서 과거 시멘틱 태그를 최초 알게됐을때 아주 혼란스러웠던적이 있었는데요 바로 내가 설계한 방식이 맞는지에 대한 검증여부였습니다 예를들어 공지사항 리스트 위젯을 만든다고 한다면 section > article에 내용을 작성하게 될텐데 표준적인 방법으론 h태그로 제목, p 태그로 내용이 들어가야 할텐데 나는 h태그가 아닌 다른태그를 넣어야 한다면? 디자인적 문제로 div태그가 난발되도 괜찮은가? 이런 고민이 많았습니다 이것 때문에 스트레스를 굉장히 받았었는데 아직 해답은 못찾았지만 대부분 그냥 큰 틀만 유지하고 세세한 구조은 div 태그를 사용하는 웹사이트가 많아서 저 또한 이 방법을 사용하고있니다
그래도 내가 표준마크업 규칙을 따르고 있는지 궁굼하다면 구글과 네이버 둘다 웹마스터 도구를 제공하는데 이 웹마스터 도구의 검증기능과 웹표준검사도구를 같이 검증하면 웬만해선 문제없이 봇이 잘 읽고 노출시켜줍니다 정말 쉽다고 느끼면서도 너무 어려운 HTML이죠
[구글 웹마스터 도구]
https://search.google.com/search-console?hl=ko
[네이버 웹마스터도구]
https://searchadvisor.naver.com
[웹표준 검사도구]
공공포털이나 다양한 이용객 대상으로 웹사이트를 만든다면 웹 접근성에 대해서도 꼭 알아보면 좋습니다
장애가 있으신분들이 조금이라도 더 쉽게 웹사이트를 이용하실 수 있도록 기준이 마련되어있습니다!
[웹접근성평가원]
https://www.wa.or.kr/m1/sub1.asp
summary, detail 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>summary</title>
</head>
<body>
<details>
<summary>요약 내용</summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, modi tenetur? Dicta quam ut ratione nemo libero exercitationem odit! Libero sed consectetur cupiditate laudantium odio iste quisquam saepe, quos dicta!
</details>
</body>
</html>html5 에서 mark, address, del 이러한 태그는 본적이 있었던 것 같은데 새롭게 알게된 태그였습니다
드롭다운 처럼 열고 닫을 수 있는 기능을 태그 자체에서 지원한다니.. 몰랐던 태그의 기능을 알고나서 굉장히 충격이었어요
부족함을 많이 느낀 부분이었습니다 과거엔 Jquery로 height값을 조정해서 만들어본 기억이 있는데 앞으론 더 쉽게 구현할 수 있을 것 같습니다
HTML은 웹 개발의 기본적인 문법이면서도 웹사이트 기초 설계단계에 해당하기 때문에 개인적으로 가장 중요한 단계라고 생각하는데요 물론 프론트와 백엔드같이 더 어렵고 복잡한 개발단계가 있지만 기초 설계에 따라 이후 개발 방식이 달라 질 수 있기도 하고 불필요한 PC자원 소모를 줄임으로서 올바르게 최적화된 웹사이트를 만들 수 있기때문에 제가 HTML을 작성할때는 되도록 태그들이 너무 많이 중첩되지않도록 만드는 것을 목표로 작성하고 있습니다
CSS 작성방법
다음으로 앞에서 말했던 CSS에 대해 자세히 알아보겠습니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예제</title>
<style>
/* 내장 스타일 태그방식 */
h1{
background-color: blue;
color: #fff;}
</style>
<!--link 외부 스타일링크방식-->
<link rel="stylesheet" href="./cssex01.css">
</head>
<body>
<!-- 인라인 방식-->
<h1 style="background-color: green;">스타일 적용</h1>
</body>
</html>앞서 말했듯 주로 사용되는 방법은 link 방식으로 앞으로 글에서도 link 방식을 통해 기록해볼예정입니다
CSS는 작성 방식에 따라 똑같은 스타일을 주더라도 우선순위가 높은 스타일입력 태그가 최종적으로 나타나게 되는데요
HTML은 초기 브라우저로 출력시 위에서 아래로 읽히게 됩니다 그렇기 때문에 제일 마지막에 읽히게 되는 인라인방식 css가 1순위가 되고 2, 3순위는 작성법에 따라 유동적이나 head 태그 내에서 제일 아랫쪽에 작성한 스타일을 최종적으로 불러오게됩니다
CSS - 선택자
선택자는 CSS에서 HTML로 작성한 태그들을 선택하여 스타일을 적용할때 사용되는 문법입니다
어떠한 선택자가 있는지 알아보겠습니다
1. 태그 선택자 (`element`): 특정 태그를 선택
- `p`는 모든 `<p>` 요소를 선택합니다.
2. 아이디 선택자 (`#id`): 특정 아이디를 가진 요소를 선택
- `#header`는 아이디가 "header"인 요소를 선택
3. 클래스 선택자 (`.class`): 특정 클래스를 가진 요소들을 선택
- `.box`는 클래스가 "box"인 모든 요소를 선택
4. 속성 선택자 (`[attribute]`): 특정 속성을 가진 요소를 선택
- `[type="text"]`는 `type` 속성이 "text"인 요소를 선택
5. 자손 선택자 (`ancestor descendant`): 특정 요소의 자손 요소들을 선택
- `div p`는 `<div>` 내부에 있는 모든 `<p>` 요소를 선택
6. 자식 선택자 (`parent > child`): 특정 요소의 직계 자식 요소를 선택
- `ul > li`는 `<ul>`의 바로 아래 있는 모든 `<li>` 요소를 선택
7. 형제 선택자
- 일반 형제 선택자 (`element ~ sibling`): 동일한 부모를 가진 형제 요소들을 선택
- 예: `h2 ~ p`는 `<h2>`와 동일한 부모를 가지며 뒤에 오는 모든 `<p>` 요소를 선택
- 인접 형제 선택자 (`element + sibling`): 특정 요소의 바로 다음에 오는 형제 요소를 선택
- 예: `h2 + p`는 `<h2>` 바로 다음에 오는 `<p>` 요소를 선택
8. 전체 선택자 (`*`): 모든 요소를 선택
- 예: `*`는 문서 내의 모든 요소를 선택
더 많은 선택자들이 있지만 대표적으로 이러한 선택자들이 존재하는데 굵은 글씨와 빨간 글씨가 있는데 이 두 개념은 확실하게 알고가면 좋은 선택자입니다 다른 선택자는 이해하기 쉽기도 하면서 자주 쓰게될 수 있는태그 이지만 형제 선택자와 속성 선택자를 잘 이용하면 불필요한 코드를 줄일 수 있어 최적화에 도움이 될지도 모르기에 확실하게 개념을 알고가면 좋을 것 같습니다
아이디 선택자
아이디 선택자('#이름')도 자주 사용하게 될 선택자입니다
아이디 선택자는 중복되지않은 고유한 이름을 갖은 선택자로 htm 페이지 내에서 2개이상 존재하면 안됩니다
반드시 1개만 존재 해야합니다 보통 재사용되지않는 태그에서 사용됩니다
속성 선택자
속성 선택자는 HTML 태그내 삽입되는 속성을 찾아 선택하는 선택자입니다
예를들어 input type이 text와 password 라는 태그가 존재한다면 각가 클래스를 줘 선택할 수 도있지만
.formbox > input[type="text"] 또는 [type="password"] 로 선택할 수 있습니다
형제 선택자
형제 선택자는 인접 형제 선택자, 일반 형제 선택자 2가지 세부 속성이 있습니다
아래 예제를 보면 금방 이해가 될 것 같은데 h2 태그를 기준으로 h2 태그에 인접형제 선택자 '+' 를 사용하면 바로 아래에 있는 p 태그가 선택됩니다
+가 아닌 ~ 태그를 사용하게되면 h2 태그 다음으로 작성된 p 태그를 모두 선택합니다
<div class="container">
<h2>Heading 1</h2>
<p>Paragraph after Heading 1.</p>
<p>Another paragraph after Heading 1.</p>
<h2>Heading 2</h2>
<p>Paragraph after Heading 2.</p>
<p>Another paragraph after Heading 2.</p>
</div>
<style>
/* 인접 형제 선택자 예제: h2 다음에 오는 p 요소만 선택 */
h2 + p {
color: blue;
font-weight: bold;
}
/* 일반 형제 선택자 예제: h2 다음에 오는 모든 p 요소를 선택 */
h2 ~ p {
background-color: lightyellow;
}
</style>
다음 예제는 형제 선택자와 속성 선택자를 같이 사용한 예제로 이번 강의에서 실습문제로 같이 내주셨는데 이걸 풀면서 응용지식이 굉장히 늘었습니다 아! 이렇게도 사용할 수 있겠구나 라고 번뜩한 아주좋은 예제입니다
<div class="container">
<input type="radio" name="option" id="option1">
<label for="option1">Option 1</label>
<input type="radio" name="option" id="option2">
<label for="option2">Option 2</label>
<input type="checkbox" name="agree" id="agree">
<label for="agree">I agree to the terms and conditions</label>
</div>
<style>
/* 라디오 버튼의 바로 다음에 오는 label 요소에 스타일 적용 */
input[type="radio"] + label {
color: blue;
font-weight: bold;
margin-left: 10px;
}
/* 체크박스의 다음에 오는 모든 형제 label 요소에 스타일 적용 */
input[type="checkbox"] ~ label {
background-color: lightyellow;
padding: 5px;
border-radius: 3px;
}
</style>
CSS - 인라인, 블록, 인라인블록
CSS 가장 중요한 개념이라고 생각되는 개념입니다 이 개념을 잘 알고 넘어가야 제대로된 화면구성을할 수 있다고 생각되기 때문에.. 상세하게 짚고 넘어가보겠습니다
1. 인라인 (`inline`)
인라인 요소는 콘텐츠가 한 줄에 배치되며, 요소의 내용 크기만큼만 공간을 차지하게됩니다
- 인라인의 특징
- 기본적으로 가로 방향으로 차지하는 공간이 요소의 내용만큼만 설정됩니다.
- 높이와 세로 방향의 여백 (`margin`, `padding`)을 지정해도 실제로 적용되는 부분이 제한적입니다.
상하여백을 지정할 수 없고 지정하게되면 배경색 속성만 적용되며 실제론 공간이 존재하지않는 부분입니다
- 다음 요소가 같은 줄에 연속해서 배치됩니다. 즉, 줄을 차지하지 않고 옆에 다른 요소들이 계속 배치됩니다.
- 대표적 인라인 요소들: `<span>`, `<a>`, `<strong>`, `<em>`, `<label>`
- 사용 예제:
```html
<span>인라인입니다</span>
<span>밑이 아니라 옆으로 배치됩니다</span>
```
위 예제에서는 `<span>` 요소들이 한 줄에 나란히 표시됩니다.
2. 블록 (`block`)
블록 요소는 전체 너비를 차지하며 항상 새로운 줄에서 시작합니다.
- 특징:
- 너비는 기본적으로 부모 요소의 너비만큼 전부 차지합니다.
- 높이와 너비를 명시적으로 설정할 수 있으며, 상하/좌우의 여백(`margin`, `padding`) 모두 효과적으로 적용됩니다.
- 항상 새 줄에서 시작하며, 다음 요소 역시 새로운 줄에서 시작하게 됩니다.
한마디로 부모요소의 크기만큼 갖고있는 박스 그자체입니다
- 대표적 블록 요소들: `<div>`, `<p>`, `<h1>` ~ `<h6>`, `<section>`, `<article>`, `<form>`
- 사용 예제:
```html
<div>이것은 블록</div>
<div>옆이 아니라 밑으로 배치됩니다</div>
```
위 예제에서는 `<div>` 요소가 각각 한 줄을 차지하여 순서대로 나옵니다.
3. 인라인 블록 (`inline-block`)
인라인 블록 요소는 **인라인 요소**처럼 **한 줄에 나란히 배치**되지만, **블록 요소**처럼 **높이와 너비를 설정할 수 있는** 요소입니다.
- 특징:
- 인라인 요소처럼 다른 인라인 요소나 인라인 블록 요소들과 한 줄에 나란히 배치됩니다.
- 높이와 너비를 명시적으로 설정할 수 있습니다.
- 상하/좌우의 여백 (`margin`, `padding`)도 모두 효과적으로 적용됩니다.
- 대표적 사용태그: `display: inline-block`을 설정한 `<div>`나 `<span>` 등 어떤 요소든 인라인 블록으로 변환할 수 있습니다.
- 사용 예제:
```html
<div style="display: inline-block; width: 150px; height: 50px; background-color: lightblue;">Inline-block 1</div>
<div style="display: inline-block; width: 150px; height: 50px; background-color: lightgreen;">Inline-block 2</div>
```
위 예제에서는 `<div>` 요소들이 각각 너비와 높이를 가지며 한 줄에 나란히 배치됩니다.
대표적인 적용 사례
- 블록 요소는 레이아웃을 구성하는 주요한 컨테이너로 사용됩니다. 예를 들어, 페이지의 섹션이나 박스를 나누기 위해 `<div>`, `<section>`을 사용합니다.
- 인라인 블록 요소는 버튼이나 메뉴처럼 높이와 너비를 설정하고 싶지만, 여러 요소를 한 줄에 나란히 배치하고자 할 때 사용합니다.
블록과 인라인, 인라인 블록은 굉장히 중요한 개념입니다 꼭 알고가세요!
+
css float 속성도 추가로 알고가면 아주좋습니다 요즘은 잘 사용하지않는 속성이지만 과거 flex등이 브라우저에서 지원되지않았을땐 많이 사용된 태그였습니다 IE6,7,8 등..크로스브라우징이 굉장히 중요시되던 시절(요즘도 중요합니다!!) 사용하다보면 갑자기 높이값이 날아가는 등 clear가 되지않아 구조가 무너지는 등 머리가 아팠던 기억이 있습니다
이번 기초과정을 처음부터 복습하듯 다시 되돌아보았는데 역시나 모르고 있었던 개념을 찾아내 알게되어 굉장히 얻은게 많은 시간이었습니다
인라인 상하 여백이 안되는것, 형제 선택자와 속성 선택자 알고는 있었지만 이걸 어디다 쓰지? 라는 생각을 갖고있었는데 개념과 실습과제를 통해 아! 이렇게 사용하면 class를 남발하지않고도 좀 더 정리된 코드를 작성할 수 있겠구나 라는 생각을 갖게되었고 nth-child() 선택자도 홀짝 아니면 특정번째 숫자지정 밖에안되는걸로 알았는데 등차수열 지정이 가능하다는 것 처음 알게되었습니다
'SAC' 카테고리의 다른 글
| [새싹x코딩온] 풀스택 개발자 부트캠프 과정 3주차-1 회고 | 반응형, Bootstrap (0) | 2024.11.13 |
|---|---|
| [새싹x코딩온] 풀스택 개발자 부트캠프 과정 3주차-2 회고 | JavaScript (0) | 2024.11.11 |
| [새싹x코딩온] 풀스택 개발자 부트캠프 과정 2주차-2 회고 | JavaScript (1) | 2024.11.09 |
| [새싹x코딩온] 풀스택 개발자 부트캠프 과정 2주차-1 회고 | CSS 마무리 (0) | 2024.11.06 |
| [새싹x코딩온] 풀스택 개발자 부트캠프 과정 1주차 회고 | GITHUB (0) | 2024.10.24 |
