[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그)

250x250

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

Hello creators 🙌

[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그) 본문

[WEB & AI] (feat. 취준)/블록체인 개발자 과정_KGA

[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그)

부시매나_HA 2023. 3. 7. 21:44

728x90

1️⃣ 이번 회차 학습 목표 (goal)

배우고자 하는 것

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

2️⃣ 수업 내용 정리

[1교시]

개발자 도구에서 shift + 휠 활용해서 -> 수치 변경하기

'개발자 도구' 에서 -> 고쳐야 하는 부분 클릭 -> shift 누르고 + 마우스 휠 -> 10 단위 씩 수치가 변경함.

1. box sizing

기능
- 그냥 div 와 div 를 만들면 -> 딱 붙어 있게 됨
- div + border 랑 div + border 주면 -> border 만큼 떨어져 있게 됨
- box sizing 을 감싸주면 -> border 를 넣어도, 그 안으로 딱 들어가게 됨. ⭐⭐⭐⭐⭐

예를 들어서
- div 의 width 를 100 으로 주고, border (1px 임) 를 주면 -> 총 해당 div 는 101px 임
- box-sizing: border-box; 를 먹이면 -> border 가 div 내부에 생김 -> so, 총 div 태그는 여전히 100px 이고, 양 옆 border 이외의 영역은 98px 임.

문제 상황
- 우선, 굵기는 다 맞췄음. 근데, 살짝 삐져나온게 있음. 이거는 box-sizing 으로 하는건가?

참고 코드

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

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

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

div 태그만 썼는데, display - block 이라는 속성(attribute) 이 잡히는 상황

이렇게 기본 속성이 필요없는 경우 -> reset css 명령어를 써 준다.
아직 배우진 않았고, 앞으로 배울 것임.

`3. display - block` 과 `inline - block` 차이

display 의 기능
- div 태그의 style 속성에 대한하는 '값' 으로써, 해당 태그의 노출 크기를 어떻게 할지 를 결정하는 역할
  - 1줄 통째로 차지
  - 남은 공간을 옆 태그에게 양보 할지

display - block 코드
- 한줄 통째로 차지함
- 부모 태그의 너비 만큼 먹는다. ⭐⭐⭐

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

inline - block 코드
- 이외의 부분은 양보
- 도형을 나란이 놓고 싶으면, inline-block 을 써야 함
  - display-flex 를 가장 많이 사용 ⭐⭐⭐⭐⭐

<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>

`4. display - flex` ⭐⭐⭐⭐⭐ (해당 div 이외의 영역을 1) block 2) inline 3) flex 여부

display 란?
- 해당 태그를 어떻게 보여줄 것 인가에 대한 속성값

display - flex 는?
- 여유 공간으로 넣게 하는데 있어서 굉장히 다양하고, 유연한 옵션을 제공함
- 쉽게 말하면, 도형을 옆으로 나란히 놓고 싶을 때, inline-block 보다 훨씬 쉬움

예제 코드

<!-- 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 속성값 : 그러면, 지금 div 이외에 나머지 부분 을 어케 할거야?
    1. block 처리 할거야?
    2. inline 으로 들어오게 할거야?
    3. 더 자유롭게 놔둘거야?
  - 지금은 flex 하게 둘거야!
- 그 다음 div 로 border 가 1px 인 div 를 그린다.

그러면, 어떻게 정렬시켜?
- 다양한 모양이 있는데, 어떻게 적용시켜?
- 개발자 도구 中 flex 를 누르면 -> 다양한 모습을 확인할 수 있음.

예를 들어 display - flex - wrap 을 쓰면, 아래로 떨어짐.

`5. width: 100%` 를 하면 -> 부모 태그의 100% 만큼을 의미 함 (상대적인 값이 들어감) ⭐⭐

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

(코드 보면서 부족한거 또 추가 할 것)
필요성
- 반응형 웹을 만들 때 필요함.

[2교시]

1. id 가 class 보다 먼저 먹는다. ⭐️⭐️⭐️

id 는 딱 하나. id 는 애기들 이름 딱 하나.
class 는 반 아이들이 많잖아. 그걸 반 이름으로 부르는거지.

음... 아직 못 해봄.

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

아직 못 해봄.

3. 꾸밀거야. '무엇에 대해서?' -> 이에 대한 답이 Selector

✅ 03_2교시, 3교시_수업필기 파일 참고 ⭐⭐⭐⭐⭐⭐⭐⭐📛📛📛

1) 태그에 id 를 설정하고 -> 해당 id 를 불러서 -> 꾸민다.

태그에 id 설정

해당 id 불러서 -> 꾸민다.

<head> 
	<style> 
		/*id 선택자는 css 작성해서 # 을 앞에 붙여준다. */
		#test{
			color: red;
		}
	<style> 
</head>

2) 태그에 class 설정하고 -> 해당 class 불러서 -> 꾸민다. ( ⭐️ 주로 이 방법! )

3) 다른 경우의 수 (🟥 예제를 해봐야 함)

#📛📛📛_보완필요_잘모르겠음

4. 메뉴판 만들기

만들어야 하는 거
- 메뉴판 만들기

음식 메뉴는 하나의 묶음으로 만드세요 (영역)
메뉴 밑으로, 음식 이름, 가격, 화면이 줄어들면, 밑으로 떨어져서 나열
가격
포인트
- 떨어지는 것 = flex wrap 으로 구현
- 레이아웃은 작은 것 부터 만들어서 큰 방향으로 뻗어져 가기

#✅️_추가로해보면좋을것같음_

[3교시]

1. css 를 link 활용해서 가져오기

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

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

[과제 - 게시판 3개 만들기]

1. 해야 하는 것

페이지 3개 만드는데
css 파일은 3개
각각의 페이지(총 3개) 마다, 태그에 직접 스타일 주지 마세요
css 파일 link 로 가져와서(불러와서) 사용
class 로 작업 / 태그에 class 속성 추가해서 작업
자세히 보기에 화살표는 빼기 - 넣을거면 이미지

2. 포인트

단계 별로 접근할 것 ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
과제 할 때 포인트 ⭐️⭐️⭐️
- div 및 태그의 위계를 잘 생각
- display flex 를 활용
- 텍스트를 가운데로 오게 하고 싶으면 -> display flex 를 써야 하는데 -> 그러려면, 태그로 감싸져 있어야 함

3. 문제상황 모음

1) 선이 겹치는 문제

문제 상황

4. 잘못 이해 했던 것 및 새롭게 배운 것

border-collapse: collapse;

이건, table 만들 때 먹는 것 임

클래스를 만들 때, 그 태그 밑에 있는 클래스 ⭐⭐⭐⭐⭐
- 이걸 활용하는 것 처럼 만들면 됨⭐⭐⭐⭐⭐ ❓❓❓❓❓

5. 교수님 가이드

`box-sizing: border-box;`` box sizing 을 잡아주기

실익은 div 그리면 그 자체로 하나의 박스가 생김 여기에 border 그리면, 선 만큼 옆으로 떨어짐 - > 그래서 살짝 떨어지게 됨. border-top 을 하면 -> 떨어진 부분이 붙게 됨.

border-top: 0; 이걸로 -> 필요한 부분만 선 그어주기 ⭐️⭐️⭐️⭐️⭐️ #🤟_배운것_WIL
그 다음에, border 시리즈로 만들어주기

해보기

우선, 굵기는 다 맞췄음. 근데, 살짝 삐져나온게 있음. 이거는 box-sizing 으로 하는건가?
- box-sizing: border-box; ⭐⭐⭐⭐⭐ 이걸 해야 삐져 나가지 않음

6. 추가적으로 하면 좋을 것

1) 자식 선택자 활용해서 선택하는거 해보기

2) 글자 넘어가는거 hidden 활용해서 해보기

#✅️_추가로해보면좋을것같음_

3) 이미지 넣는거 해보기

이모지를 넣고 싶은데... 우선 이렇게 까지 밖에 안 됨.

✅ 추가로 해야할 것

03_2교시, 3교시_수업필기 파일 참고 ⭐⭐⭐⭐⭐⭐⭐⭐ 해서 -> 자식 선택자 같은 것 해보기 ⭐⭐⭐⭐⭐⭐⭐⭐
- 여기 이후부터는 우선 요약해봄.

--- ## 참고자료 - KGA_경일게임아카데미_블록체인과정_WEEK01_HTML ---

728x90

저작자표시 비영리 변경금지

'[WEB & AI] (feat. 취준) > 블록체인 개발자 과정_KGA' 카테고리의 다른 글

[git & github] 02. 1) branch 생성 및 merge 2) 다른 협업 팁 (feat. git, github, 형상 관리 도구) (0)	2023.03.11
[git & github] 01. 1) 깃헙 가입 및 설치 2) git 활용해서 1️⃣ pull 2️⃣ push 해보기 (feat. git, github, 형상 관리 도구) (2)	2023.03.07
[HTML&CSS] 04. 메가박스 영화 예매 페이지 만들기 (feat. input 과 label 태그, 형제 관계, sibling, 선택자의 중요성) (2)	2023.03.07
[HTML&CSS] 03. 유튜브 썸네일 만들기 (feat. 호버, hover, 개발자 도구의 중요성) (0)	2023.03.07
[HTML & CSS] 01. 입사지원서 만들기 (feat. html 기초적인 문법 활용) (4)	2023.02.28

'[WEB & AI] (feat. 취준)/블록체인 개발자 과정_KGA' Related Articles

Comments

Hello creators 🙌

[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그) 본문

[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그)

1️⃣ 이번 회차 학습 목표 (goal)

배우고자 하는 것

2️⃣ 수업 내용 정리

[1교시]

개발자 도구에서 shift + 휠 활용해서 -> 수치 변경하기

1. box sizing

2. div 태그 자체의 기본 내장 속성 및 reset CSS

3. display - block 과 inline - block 차이

4. display - flex ⭐⭐⭐⭐⭐ (해당 div 이외의 영역을 1) block 2) inline 3) flex 여부

5. width: 100% 를 하면 -> 부모 태그의 100% 만큼을 의미 함 (상대적인 값이 들어감) ⭐⭐

[2교시]

1. id 가 class 보다 먼저 먹는다. ⭐️⭐️⭐️

2. * 선택자는 모든 태그에 스타일을 적용시킨다.

3. 꾸밀거야. '무엇에 대해서?' -> 이에 대한 답이 Selector

4. 메뉴판 만들기

[3교시]

1. css 를 link 활용해서 가져오기

[과제 - 게시판 3개 만들기]

1. 해야 하는 것

2. 포인트

3. 문제상황 모음

1) 선이 겹치는 문제

4. 잘못 이해 했던 것 및 새롭게 배운 것

5. 교수님 가이드

해보기

6. 추가적으로 하면 좋을 것

1) 자식 선택자 활용해서 선택하는거 해보기

2) 글자 넘어가는거 hidden 활용해서 해보기

3) 이미지 넣는거 해보기

✅ 추가로 해야할 것

'[WEB & AI] (feat. 취준) > 블록체인 개발자 과정_KGA' 카테고리의 다른 글

티스토리툴바

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

`3. display - block` 과 `inline - block` 차이

`4. display - flex` ⭐⭐⭐⭐⭐ (해당 div 이외의 영역을 1) block 2) inline 3) flex 여부

`5. width: 100%` 를 하면 -> 부모 태그의 100% 만큼을 의미 함 (상대적인 값이 들어감) ⭐⭐

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