🦁 멋사 1번째 활동

황다은·2023년 3월 17일

🦁 멋쟁이사자처럼

목록 보기

1/8

HTML/CSS

1주차는 장고를 다루기 위해 정말 기초적인 HTML과 CSS를 학습했다.
장고를 배울때 templates을 구현하기 위해서 html을 작성해야하는데 이때 각 태그와 속성값의 의미를 잘 이해하기 위한 빌드업이라고 생각하면 될 것 같다.

먼저 기본 html 코드를 ! + Tab을 이용해 불러오면 아래와같은 코드가 나온다

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
</head>
<body>
  	
</body>
</html>

1. inline과 block 태그

div와 span태그를 이용한 inline과 block 타입의 차이를 알아보자.

<head>
  	<style>
      	.blockTag{
      		background-color: yellowgreen;
      	}
      	.blockTag > div {
      		background: tomato;
      		border: 1px solid black;
      	}
      	.inlineTag span {
      		background: skyblue;
      		border: 1px solid black;
      	}
  	</style>
</head>
<body>
  	<div>
      	<div class="blockTag">block1
      	<div>block2</div>
      	<div>block3</div>
        </div>
  	</div>
  
  	<div class="inlineTag">
      	<span>inline 1</span>
      	<span>inline 2</span>
      	<span>inline 3</span>
  	</div>
</body>

👉 코드 수행 결과

block1

block2

block3

inline 1 inline 2 inline 3

먼저, div 태그를 살펴보자.

✅ block 타입으로 한 줄을 차지한다.
➡ background에 color를 적용했을 때 글자 크기와 상관없이 한 줄 모두를 차지하는 것을 볼 수 있다.

다음으로 span 태그를 살펴보자.
✅ inline 타입으로 갖고있는 글자 크기만큼을 차지한다.

클래스(class)는 이름을 지정한다고 생각하면 된다.

🔸 div와 span 태그에 스타일을 지정할때 호출하는 방법 🔸

class는 '.클래스명'으로 호출한다.
일반 태그는 '태그명'으로 호출한다.
class가 품고있는 자식태그를 호출하려면 '.클래스명 > 자식태그명'으로 호출한다.

강의를 보면서 style태그를 왜 body안에 입력하는지 의문이 들었다.🤔
학교에서 배울때나 다른 강의를 들었을때 단 한번도 body안에 써본적이 없었고,
책에서도 style태그는 head에 속한다고 나와있었기 때문에 검색을 해봤는데....
안나와서 직접 물어봤다.😅 지식인에.....
그 답변🔻

style태그의 경우 head안에 넣는 것과 body 안에 넣는것은 동일한 결과를 보여준다.
왜냐? 웹페이지를 불러올 때 head와 body 안에 있는 것을 모두 참조하기 때문이다.
오히려 head안에 style 속성을 모아놓을때보다 가독성이 떨어지고 head 안에 넣는 것을 권장한다.

그렇다면 왜 이 강의에서는 body안에 style을 태그를 썼을까?

사실 이 유튜버분한테 물어보는게 가장 정확하겠지만 그냥 강의를 보면서 느낀 점은
속성으로 강의를 진행하다보니 head 부분을 보여줬다가 다시 body 부분을 보여주기에 왔다갔다 하는 시간이 있기때문에 그런게아닐까....❓❗ (그냥 내 추측임 ><)

2. 목록태그

<body>
 	<ul>
     	<li>목록 1</li>
     	<li>목록 2</li>
     	<li>목록 3</li>
 	</ul>
</body>

👉 코드 수행 결과

li태그는 기본값일 경우 목록 앞에 점이 자동으로 생긴다.

만약, 점을 없애고 싶다면...❗

<style>
	li {
  	list-style: none;
  	}
</style>

이렇게 style 내에서 list-style의 값을 지정하면 된다. ><
➡ none 은 스타일을 없앤다. 즉, 지정하지 않겠다는 뜻`

3. form 태그

회원가입 시 데이터베이스로 보내는 역할

form 태그에 자주쓰이는 기본 input type을 알아보자.

<form>
  <input type="text">
  <input type="submit">
  <input type="checkbox">
  <input type="radio">
</form>

👉 코드 수행 결과

"text" 👉 텍스트 입력
"submit" 👉 제출 버튼
"checkbox" 👉 체크박스 (여러 개 체크 가능)
"radio" 👉 선택 (한개만 선택 가능)

radio와 checkbox 타입은 label 태그를 이용해 한 덩어리로 묶어줌을 명시

checkbox와 radio 타입을 사용할 때 name 속성을 이용해 같은 name을 가진 한 분류를 묶어주어야한다.
왜냐면!

radio 타입은 모든 항목 중 한 개만 선택할 수 있어야한다.
같은 name안에서 하나만 선택이 가능하도록 해야하므로 동일한 name값으로 묶어주어야한다.

id값은?
👉id값을 지정해 각자 이름을 부여해준다.

진짜 name값을 하나만 다르게 줘봤는데 라디오버튼임에도 불구하고 체크가 두개가 되네
(~~신기방기...~~😲😲)

label 태그란?!
👉 폼 요소에 이름표를 붙이기 위한 것으로, input 입력 창 앞에 있는 텍스트

label 태그를 사용하지 않았을 때
- input 태그가 적용된 텍스트 부분(입력 칸)을 정확히 클릭해줘야만 입력 가능
label 태그를 사용했을 때
- input 태그에 해당하는 텍스트(글자)를 클릭해도
- input type= "text" 는 입력, "checkbox" 는 체크, "radio" 는 선택이 가능

👉 input 태그는 기본적으로 span 태그와 같이 inline 속성을 갖는다.

👉가독성을 높이기 위해서 form 태그 안에 ul-li-input 태그를 이용해 <br> 효과

4. `button` 타입은?

<input type="button" value="버튼명"></input>

button명은 value를 이용해 지정한다.

수행결과

🔸 button 스타일 적용하기

<style>
.colorBtn {
   width: 100px;
   height: 36px;
   background-color: yellow;
   color: darkbrown;
   text-align: center;
   line-height: 36px;
   cursor: pointer;
}
</style>
<body>
<div class="colorBtn">백엔드 클릭!!</div>
</body>

수행결과

백엔드클릭!!

5. `a` 태그와 `img` 태그

<a href="URL(주소) 입력">바로가기명</a>

수행결과
내 벨로그 바로가기 ><

보통 a 태그는 내가 만든 여러 html 페이지를 서로 연결시킬때 주로 사용한다...!

이미지가 안불러질때는 경로 꼭 확인하기!

<img src="이미지 경로">

수행결과

흐어어어엉 황고명 너무 귀여워....😭😭😭😢

6. padding과 margin

padding ➡ 큰 패딩을 입을수록 내 덩치가 커진다, 면적이 커진다.

<style>
    div > span {
            background: antiquewhite;
 
</style>
<body>
    <div>
        <span>황고명</span>
        <span>너무</span>
        <span>귀여워</span>
</body>

수행결과

황고명 너무 귀여워

margin ➡ 면적은 그대로, 거리만 멀리 떨어트림 (싫어하는 사람이랑 같이 앉기 싫은 그런거)

<style>
  div > span {
          background: antiquewhite;
          padding: 10px;
			margin : 50px;
</style>
<body>
  <div>
      <span>황고명은</span>
      <span>진짜</span>
      <span>너무</span>
      <span>귀여워</span>
</body>

수행결과

div 태그에 background color를 넣어서 보기쉽게 확인 가능
굳이 코드를 쓰진않을께.... 길어.

div > span:first-child = 첫번째 자식 span태그만 지정
div > span:last-child = 마지막 자식 span태그만 지정

기본적으로 padding과 margin 속성은 top, right, left, bottom 모두 지정되어 있다.
padding-top, padding-right, padding-left, padding-bottom
margin-top, margin-right, margin-left, margin-bottom 으로
원하는 부분에만 속성값을 지정할 수 있다.

7. table 태그

table 태그는 html과 같이 thead, tbody로 이루어진다. (tfoot도 있지않나...?)

tr 태그를 열어 th나 td 요소들을 가로로 한줄 묶을 수 있다.

 <style>
   table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        table > thead > tr > th {
            border: 1px solid gray;
        }
        table > tbody > tr > td {
            border: 1px solid gray;
            background: pink;
        }
 </style>
<body>
	<table>
    	<thead>
        	<tr>
              	<th>이름</th>  
              	<th>나이</th>
              	<th>직업</th>
          	</tr>
      	</thead>
      	<tbody>
        	<tr>
              	<td>신형만</td>  
              	<td>봉미선</td>
              	<td>신짱구</td>
              	<td>신짱아</td>
      			<td>흰둥이</td>
          	</tr>
      	</tbody>
  	</table>
</body>

th : table header, 헤더 칸을 나타내는 태그
기본값 ➡ text-align:center, font-weight:bold 로 지정되어 있다.

tr : table row, 행을 나타내는 태그
td : table data, 일반적인 칸을 타나내는 태그

👉 border-collapse란?

table 태그와 td 사이가 겹치지않고 두 줄로 표시되도록 한다.

속성값
1) collapse : 테두리를 하나로 합쳐 표시한다.
2) separate : 테두리를 따로 표시한다. (기본값)

수행결과

이름 나이 직업

신형만 35 회사원

봉미선 29 주부

신짱구 5 유치원생

신짱아 1 아기

흰둥이 ? 개(강아지)

이름	나이	직업
신형만	35	회사원
봉미선	29	주부
신짱구	5	유치원생
신짱아	1	아기
흰둥이	?	개(강아지)

짱구 옷으로 색깔 해봤는데...... 음........ 구리다................
견뎌....................!!

 * {
           border-collapse: collapse;
           margin: 0px;
           padding: 0px;
           text-decoration: none;
           color: black;
           list-style: none;
       }

* : 모든 선택자

👉 디자인 할때 미리 세팅해두는(해둬야 편한) 기본 스타일

8. position

position : 웹페이지 전체에 위,아래,왼쪽,오른쪽 위치 지정

static : 요소를 흐름에 맞춰 배치

relative : 이전 요소에 자연스럽게 연결해 위치 지정, 자신을 기준으로 배치한다.

absolute : 원하는 위치 지정하여 배치, 위치 상 부모 요소를 기준으로 배치한다.

fixed : 지정한 위치에 고정하여 배치, 웹페이지를 기준으로 배치한다.

ex) 쇼핑몰의 헤더나 베너, 페이지가 움직여도 배너는 고정

sticky : 위치에 따라 달라짐, 스크롤 영역 기준으로 배치한다.

(스크롤바와 관련o)

static 제외 속성은 top, left, right, bottom 지정 가능

황다은

BackEnd

다음 포스트

🦁 멋사 1번째 활동

🦁 멋쟁이사자처럼

HTML/CSS

1. inline과 block 태그

2. 목록태그

3. form 태그

4. `button` 타입은?

5. `a` 태그와 `img` 태그

6. padding과 margin

7. table 태그

8. position

🦁 멋사 2번째 활동

0개의 댓글

🦁 멋사 1번째 활동

🦁 멋쟁이사자처럼

HTML/CSS

1. inline과 block 태그

2. 목록태그

3. form 태그

4. button 타입은?

5. a 태그와 img 태그

6. padding과 margin

7. table 태그

8. position

🦁 멋사 2번째 활동

0개의 댓글

4. `button` 타입은?

5. `a` 태그와 `img` 태그