[HTML&CSS] 02. 게시판 - 남자를 몰라

1⃣ 이번 라운드의 학습 목표(목표)

쉬운 목차

1. 배우고 싶은 것

게시판 3개 만들기
css 및 html 기본 개념

2⃣ 수업 내용 요약

1. 첫 번째 기간

개발자 도구에서 Shift + Wheel 사용 -> 값 변경

‘개발자 도구’에서 -> 수정이 필요한 부분 클릭 -> 층 + 누르기 마우스 휠 -> 값이 10 단위로 변경됩니다.

상자 크기

기능
- div와 div를 생성하기만 하면 됩니다.
  
  -> 함께 유지됩니다.
- div+boundary 및 div+boundary를 지정하면 -> 경계로 구분됩니다.
- 상자의 크기를 감싸면 -> 테두리를 넣어도 안에 들어갑니다.

'추천 관련글,

예를 들어
- div의 너비를 100으로 설정하고 여백(1px)을 지정한 경우 -> 해당 div는 총 101px입니다.
- box-sizing: border-box; -> div 내부에 테두리가 생성됩니다 -> 전체 div 태그는 여전히 100px이고 양쪽 테두리를 제외한 영역은 98px입니다.

문제 상황
- 우선 두께가 괜찮습니다.
  
  하지만 조금 눈에 띄는 것이 있습니다.
  
  이거 박스사이즈인가요?

추천 코드

/* ⭐⭐⭐ 이걸 해야 삐져나가지 않음 ⭐⭐⭐  */
box-sizing: border-box;

border: 1px solid;
border-top: 0;
border-left: 0;

`div 태그` 자체 내장 기본 속성 및 `reset CSS`

방금 div 태그를 사용했지만 display – block이라는 속성이 캡처되었습니다.

이와 같은 기본 속성이 필요하지 않은 경우 -> reset css 명령을 작성
아직 배우지 않았는데 앞으로 배우게 될 것입니다.

`display - block` 수업 `inline - block` 차이점

디스플레이의 기능
- div 태그의 style 속성에 대한 ‘값’으로, 태그의 노출 크기 설정 방법 결정의 역할
  - 전체 행을 차지
  - 남은 공간을 옆 태그에 남길지 여부

디스플레이 – 블록 코드
- 전체 행을 차지
- 부모 태그의 너비만큼 먹습니다.

<div style="width: 500px;">
      <div style="display: block;"> </div>
</div>

인라인 블록 코드
- 양보 제외
- 도형을 서로 옆에 배치하려면 인라인 블록을 사용해야 합니다.
  - 디스플레이 플렉스는 가장 일반적으로 사용되는 입니다.

<div style="width: 500px;">
	<div style="display: inline-block;"> </div>
</div>

(예시 2)

<!
-- 🔵 두 번째, 
		이렇게 하면 -> 자기가 작더라도 - 부모의 크기를 자신이 가져서 - 떨어지게 됨 
		인라인 블록 먹이면 -> 자신의 크기 만큼 차지 함 -->
<div style="width: 100%;"> 
	<div style="width: 200px; height: 200px; border: 1px solid; display:inline-block; "> </div>  
	<div style="width: 200px; height: 200px; border: 1px solid; display:inline-block;"> </div>
</div>

`display - flex` (Div 1 이외의 영역) Block 2) Inline 3) Flex

광고란?
- 해당 태그를 표시하기 위한 속성 값

광고 – Flex는 어떻습니까?
- 여유 공간에 로드하기 위한 다양하고 유연한 옵션 제공
- 간단히 말해서, 그림을 서로 옆에 배치하려면인라인 블록보다 훨씬 쉽습니다.

샘플 코드

<!
-- div 하나를 만들었음. > 그 옆에 있는 건 어케 보여줄거야? block, inline, flex
		flex 를 했다면, 그 옆의 잉여공간은 자식 태그들로 유연하게 보여지게 됨. -->
<div style="display: flex;"> 
	<div style="width: 200px; height: 200px; border: 1px solid;"> </div>
	<div style="width: 200px; height: 200px; border: 1px solid;"> </div>
	<div style="width: 200px; height: 200px; border: 1px solid;"> </div>
</div>

읽다
- div 태그 사용 -> 특정 범위 지정
- style 속성을 통해 -> 무언가를 변경하시겠습니까?
  - display 속성값 : 그 다음에, 이제 다양한 옆에 나머지 무엇을 할 건가요?
    1. 막아줄래?
    2. 인라인으로 만들 것인가?
    3. 좀 더 자유롭게 해줄래?
  - 지금 구부러 당신이 그것을 할 거 야!
- 다음 div 테두리가 1px인 div를 그립니다.

그래서 어떻게 정렬합니까?
- 다양한 형태가 있는데 어떻게 사용하나요?
- 개발자 도구의 Flex ->를 누르면 다양한 모습을 확인할 수 있습니다.

예를 들어 display - flex - wrap 쓰다보면 떨어집니다.

`width: 100%` -> 상위 태그의 100%만큼(상대값 입력)

<div style="width: 100%;">

(코드를 보면서 빠진 부분을 추가하겠습니다)
필요
- 반응형 웹을 구축할 때 필요합니다.

2. 2교시

이드는 수업 전에 먹는다.

id 단 하나입니다.

ID는 아기의 이름일 뿐입니다.
class 수업에 많은 아이들이 있습니다.

당신은 그것을 당신의 이름의 절반으로 부릅니다.

음… 아직 안써봤어.

`*` 선택기는 모든 태그에 스타일을 적용합니다.

난 아직 할 수 없어

무엇에 대해?’ -> 이에 대한 답은 Selector

03_2교시, 3교시_수업필기 메모

#### 1. 태그에 ID 설정 -> ID 호출 -> 꾸미기.

ID를 태그로 설정

해당 ID 호출 -> 꾸미기.


<head> 
	<style> 
		/*id 선택자는 css 작성해서 # 을 앞에 붙여준다.

 */
		#test{
			color: red;
		}
	<style> 
</head>

2. 태그에 클래스 설정 -> 클래스 호출 -> 꾸미기. ( 주로 이렇게!
)

3. 다른 경우의 수(는 예를 들어야 함)

#_추가해야 함_모름

1) 두 번 사용하면 어떻게 되나요? -> 중첩

2) ` * 선택자는 모든 태그에 스타일을 적용합니다.

“

3) 태그 선택기: 태그 이름으로 스타일 지정 가능

4) 여러 태그에 속성을 함께 적용하는 경우

5) 어린이 선택

3. 메뉴판 만들기

해야 할 일
- 메뉴판 만들기

메뉴를 그룹(영역)으로 만들기
메뉴 하단에는 음식명, 가격, 화면 축소 시가 아래로 내려와 나열됩니다.
가격
가리키다
- 낙하 = 플렉스 테이프로 구현
- 레이아웃은 소형에서 대형으로 구성됩니다.

#_추가해주시면좋겠습니다_

4. 3교시

링크에서 CSS 가져오기

    <!
-- CSS 코드를 작성하는 대신, 외부 파일을 이곳에 넣어주기 -->
        <!
-- link 태그는 외부 css 파일이나, ✅ (키워드) favicon 을 불러올 때, 주로 사용 
            파비콘은 : 브라우저의 아이콘 이미지. 
            ✅ 정리할 때, 키워드도 넣자. 산발적이다.

 
            ./ 이렇게 찾아가는 것 📛📛 -->
    <link rel="stylesheet" href="http://hello-5200.m/./style.css"> 

    <!
-- 
        파일 분리 방식의 실익 ⭐⭐  
        main.css 로 파일 만들면 -> main page 에 만 적용
        common.css 로 하면 -> 모두 적용
        관리 쉽게 할 수 있음.  -->

다섯번째 과제 – 게시판 3개 만들기

무엇을 해야할지

3면 만들기
3개의 CSS 파일
각 페이지(총 3개)에 대한 태그 스타일을 직접 지정하지 마십시오.
CSS 파일 링크를 임포트(가져오기)하여 사용
클래스 작업 / 태그에 클래스 속성 추가
상세보기에서 화살표는 빼기 – 넣으면 이미지가

가리키다

단계별 접근
작업 완료 포인트
- div 태그의 사려 깊은 계층 구조
- 디스플레이 플렉스 사용
- 텍스트를 중앙에 배치하려면 -> Display Flex를 사용해야 합니다.
  
  -> 이를 위해 태그로 감싸야 합니다.

문제 상황 모음

겹치는 선 문제

문제 상황

오해와 새로운 통찰

border-collapse: collapse;

밥상을 차릴 때 먹는 것

수업을 만들 때 이 태그 아래의 수업은 이 됩니다.
- 이렇게 하세요

교수 가이드

`box-sizing: border-box;`는 상자 크기를 설정합니다.

실용적인 div를 그리면 저절로 박스가 나오게 되는데, 여기서 테두리를 그리면 선처럼 옆으로 떨어지게 됩니다 -> 살짝 떨어집니다.

border-up 하시면 분리된 부분이 추가됩니다.

border-top: 0; 그래서 -> 꼭 필요한 부분만 그려주세요 #_배운_WIL
그 다음에, border 시리즈로 만들어주기

시도

우선 두께가 괜찮습니다.

하지만 조금 눈에 띄는 것이 있습니다.

이거 박스사이즈인가요?
- box-sizing: border-box; 토하지 않게 이렇게 하세요

추가하면 좋을듯

1) 하위 선택자로 선택을 시도하십시오.

2) 숨겨진 텍스트 건너뛰기 시도

#_추가해주시면좋겠습니다_

3) 그림 삽입 시도

이모티콘을 추가하고 싶은데… 우선, 아직까지는요.

6. 입력 태그 정보: `06_4교시_input.html` 파일 번호

정말 많은 방법이 있습니다

7. CSS 스타일 정리: `참고파일_CSS.css` 하나의 파일로 분류됩니다.

누적 업데이트를 시도하십시오

DIY(미니 프로젝트, 작업)

당신은 무엇을하길 원합니까
당신이 작성한 코드
결과

또 해야 할 일

03_2교시, 3교시_수업필기 파일 참조 수행 -> 하위 선택기 같은 것을 시도하십시오
- 여기서부터 먼저 요약하겠습니다.

내가 배운 것

— ## 참고자료 – KGA_Kyungil Game Academy_Blockchain Course_WEEK01_HTML —