첫 번째 과제로 html, css 기초 영상을 받았다.
프로그램은 예전부터 쓰던 자바스크립트를 사용하여 진행했다!
영상 처음에 !doctype html 과 기본적인 head, body 태그를 작성하는데
나는 ! + tab 키로 기본적인 태그들을 작성했다.
1. inline / block 태그의 차이점
<div>
<div>block 1</div>
<div>block 2</div>
<div>block 3</div>
</div>
<div>
<span>inline 1</span>
<span>inline 2</span>
<span>inline 3</span>
</div>실행 결과
body 태그 안에 div 태그와 span 태그를 작성하였을 때
단순히 block 태그는 세로, inline 태그는 가로로 나오는 것처럼 보일 수 있는데
여기서 css 요소인 style 태그를 추가한다면
<style>
/*style 태그 안에서 클래스는 .을 붙여서 부르고 태그는 그냥 부르면 된다*/
.block_tag{
background-color: yellowgreen;
}
.block_tag > div{ /* 상속 */
background-color: skyblue;
border: 1px solid black;
}
.inline_tag{
background-color: yellow;
border: 1px solid black;
}
</style>실행 결과
block 태그는 한 줄을 다 차지하고 있으며
inline 태그는 글자만큼 차지하고 있는 걸 알 수 있다.
2. 제목 태그/ 목록 태그
제목 태그 h1~h6까지 존재한다
<h1>제목</h1>
<h2>제목</h2>
<h6>제목</h6>
<ul>
<li>목록 1</li>
<li>목록 2</li>
<li>목록 3</li>
</ul>실행 결과
제목
제목
제목
- 목록 1
- 목록 2
- 목록 3
이때 목록 태그의 기본 속성인 ●을 없애주려면
li{ list-style:none;}style 태그에 list style을 변경해주면 된다 (다른 속성들도 있다)
3. form / input 태그 (입력 양식)
form 태그는 서버 사이드, DB 등에 데이터 전송을 할 때 사용
input 태그에는 여러 type 양식이 있음
<form>
<!--목록 태그를 활용해 input 태그가 한 줄을 다 차지하도록 만듬-->
<ul>
<li><input type="text"></li>
<li><input type="password"></li>
<li> <!-- radio, checkbox 는 label 태그로 감싸줌 -->
<label><input type="radio" name="fruit" id="orange">오렌지</label>
<label><input type="radio" name="fruit" id="apple">사과</label>
<label><input type="radio" name="fruit" id="strawberry">딸기</label>
</li>
<li>
<label><input type="checkbox" name="fruit" id="orange">오렌지</label>
<label><input type="checkbox" name="fruit" id="apple">사과</label>
<label><input type="checkbox" name="fruit" id="strawberry">딸기</label>
</li>
<li><input type="button" value="버튼입니다"></li>
<li><input type="submit" value="전송하기"></li>
</ul>
</form>실행 결과
- 오렌지 사과 딸기
- 오렌지 사과 딸기
radio 태그는 같은 name 안에서 1개만 선택할 수 있고
checkbox 태그는 여러 개를 선택할 수 있다
그런데!!
button 태그는 브라우저마다 기본 디자인이 다르고
submit은 데이터 검증을 하지 않고 바로 DB에 전송한다는 점을 보완하기 위해
4. 직접 div에 버튼 디자인하기
...
<style>
.newBtn{
background-color: black;
width: 100px;
height: 36px;
color: white;
text-align: center;
line-height: 36px;
cursor: pointer;
border-radius: 3px;
}
</style>
<body>
<li><div class="newBtn">버튼</div></li>
</body>
...버튼에 style 태그를 넣어 디자인을 했다
실행 결과
버튼 위에 마우스를 올리면 커서가 바뀌는 효과도 볼 수 있다!
(작성 중일 때의 미리보기에서는 버튼이 나오는데... 작성 뒤에서는 버튼이 보이지 않는다 ㅠㅠ 혹시 왜 이러는지 아는 분................................?)
5. img / a (이미지와 링크 넣기)
a 태그는 앵커, 링크라고도 한다
내가 웹 사이트를 제작할 때 여러 개의 html 페이지들을 서로 연결시키는데 주로 쓰인다
<a href="https://www.naver.com">네이버 바로가기</a>실행 결과
네이버 바로가기
image 태그를 쓸 때 html과 image 파일은 따로 분류해서 넣는다
<img src="image/KakaoTalk_20220201_133002588.jpg" width="100px" height="100px">실행 결과
사진이 안 뜨는 이유는... 이미지가 내 컴퓨터 폴더에만 있는 이미지이기 때문!
6. maggin / padding (여백과 면적의 차이)
<style>
div{
background-color: pink;
padding: 10px;
}
div > span{ /* span태그는 자기 글자만큼만 한줄에 차지 */
background-color: green;
padding: 10px;
margin: 40px;
}
div > span:first-child{ /* div 태그의 자식에서 첫 번째 요소만 선택 */
background-color: blueviolet;
}
div > span:last-child{ /* div 태그의 자식에서 마지막 요소만 선택 */
background-color: blueviolet;
}
</style>
<body>
<div>
<span>html</span>
<span>css</span>
<span>과제 중</span>
</div>
</body>
maggin 태그는 거리가 늘어나고, padding 태그는 면적이 늘어난다
값을 줄 때 top, buttom, right, left 를 적으면 상하좌우 값을 다르게 줄 수 있고
값을 따로 주지 않으면 상하좌우 값이 동일하게 들어간다
실행 결과
7. table 태그
<html>
<head>
<style>
table{
border-bottom: 1px solid black;
border-right: 1px solid black;
border-collapse: collapse; /* 테이블의 두꺼운 선? 없애는 태그 */
}
table th{ /* table 태그 안에 있는 모든 th에 css 적용 */
border: 1px solid gray;
}
table tbody > tr > td{
border: 1px solid gray;
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>이름</th>
<th>성별</th>
<th>나이</th>
<th>키</th>
</tr> <!-- th, td 요소들을 한줄에 묶는 역할 (소제목 느낌)-->
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>남성</td>
<td>모름</td>
<td>모름</td>
</tr>
<tr>
<td>성한빈</td>
<td>남성</td>
<td>23</td>
<td>181</td>
</tr>
</tbody>
</table>
</body>
</html>
table 태그에는 thead(=테이블 머리), tbody(=테이블 몸), tfoot(=테이블 바닥)이 있으며
tr(=행), td(=열), th(=테이블 헤더) 태그가 있다!
css에서 style을 줄 때, border 속성도 상하좌우 다르게 효과를 줄 수 있다
실행 결과
사심을 좀 넣어봤다... ^^
7. 모든 태그 요소 선택자 *
모든 요소 하나하나에 기본값을 설정할 때 사용한다
주로 html의 기본 속성들을 변경할 때 사용하는데 예를 들면
<style>
*{
margin: 0px;
padding: 0px;
}
<style> html의 기본 속성으로 있는 여백을 없애주는데 사용!
8. position (absolute, relative, fixed)
absolute - 독립적으로 좌표만을 따르며 이동
relative - 여러 요소들과 관계된 현재 위치를 기준으로 이동
fixed - html 문서가 아닌 브라우저를 기준으로 이동 (고정!) 코드는... 생략하겠다... 왜냐하면 브라우저를 너무 차지하는 느낌이라...
css 요소인 style 태그에
position: (absolute, relative, fixed) 을 집어넣으면 보다 정확하게 알 수 있다
9. display(none, block, inline, fiex)
어떻게 보이게 할지를 설정하는 태그!
<style>
div > span{
display: block;
background-color: pink;
}
div > div{
flex: 1;
background-color: orange;
border: 1px solid white;
}
.flexable{
display: flex;
}
</style>
<div>
<span>span</span>
<span>span</span>
</div>
<div class="flexable">
<div>div</div>
<div>div</div>
<div>div</div>
</div>
block 태그에 display: inline을 주면 inline 태그처럼 화면이 변하고
inline 태그에 display: block을 주면 block 태그처럼 화면이 변한다!
또는 display:none을 주면 태그는 있는데 화면에서는 보이지 않게 된다
실행 결과
fiex는 부모에 display:flex로 설정을 한 뒤 자식에 flex:1 로 지정을 하면 동일하게 1씩 자리를 차지하게 되고,
자리를 차지할 자식을 설정해 값을 주면 그 값만 자리를 차지할 수 있게 해 준다!
강의는 이 영상을 보면서 공부했다!
첫 번째 강의
두 번째 강의
과제를 하면서 느낀점...?
html, css를 예전에 배운 경험이 있었는데 다시 한번 되짚고 가는 느낌이라
크게 어렵지도 않았고 오히려 재미있었다!
