s1u4 html기초
마크업 언어 html : 웹 페이지 구조를 작성
디자인 언어 css
<html>
<head>
<title> Page title</title>
</head>
<body>
<h1>hello world</h1>
<div>
<span>here too!</span>
</div>
</body>
</html>자주 쓰이는 html 태그
<div>div태그는 한 줄을 차지한다.</div><span> // span태그는 컨텐츠 크기만큼 공간 차지한다.</span> <img src="https://i.imgur.com/~~.jpg"><a href="http://www.naver.com" target="_blank"> 주소로 이동 </a>
//새탭에서 링크 열리게 <ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul><form>
Username:<br>
<input type="text" name="username" placeholder="type here">
<input type="submit" value="submit">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="checkbox" name="vehicle1" value="bike">i have a bike<br>
<input type="checkbox" name="vehicle2" value="car">i have a car
</form><label for="story"> tell us your story 제목 </label>
<textarea id="story" name="story" rows="5" cols="33">
</textarea><button>버튼<button>s1u5 css 기초
css의 몇가지 property
.box{
color: // 글자색상
background-color: // 배경색상
border-color: 테두리 색상
}
.emphasize{
font-family: //글꼴 속성
font-size: // 글자 크기 변경
font-weight: // 굵기
text-decoration: // 밑줄, 가로줄
letter-spacing: // 자간
line-height: // 행간
}가로 정렬
text-align: left;
text-align: center;
text-align: right;
text-align: justify; // 양쪽정렬세로 정렬은 박스모델을 알아야함
css 몇가지 단위
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
글꼴 사이즈 정할 때
- 기기, 브라우저 사이즈 등에 영향받지 않는 절대적인 크기로 정할 때는 => px (인쇄와 같이 화면의 사이즈가 정해진 경우에 쓰자)
- 일반적인 경우, rem을 쓰자!!!(root의 글자 크기에 따라서 상대적 크기 변경)
=> 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem!!! 작게 하려면 0.8rem으로 조절해보자!!!
=> 접근성이 유리하겠죠? (em은 부모 엘리먼트에 따라 상대적 크기 변경)
화면 사이즈 정할 때
- 디바이스 크기를 나누는 기준은 보통 px로 정한다.
- 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh로 구현
박스모델
모든 콘텐츠는 각자의 영역을 가지며, 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 항상 직사각형이고, w와 h를 가진다.
박스 종류
block 박스 vs inline 박스
- 줄바꿈이 되는 박스 : block 박스
- 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스 : inline박스
질문: 위 html에서 줄 바꿈이 되는 요소는? 적용되지 않는 요소는 ?
=> div태그와 h1태그와 p태그는 줄바꿈이 되고, span 태그는 줄 바꿈이 되지 않는다.
=>span태그는 박스 크기 설정 속정이 적용되지 않는다.
inline-block은 줄바꿈이 일어나지 않고, 글자가 차지하는 만큼의 너비를 가지고, width와 height 사용이 가능하다.
박스 구성하는 요소 및 속성
border
p{
border: 1px solid red;
border-style: // 테두리 점선으로 바꿔볼래?
border-radius: // 둥근 모서리 만들기
box-shadow: // 박스 바깥쪽에 그림자
}margin
margin-top : //이런식으로 해줘도 되고
margin : //이렇게 하면 위 오, 아래, 왼 순서로 적용된다.
margin-top : -2rem ; //음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다. 극단적으로 적용하면 화면에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수 있다. padding
박스크기 측정 기준
여백과 테두리 두께를 포함해서 박스 크기를 계산하게 맘ㄴ든다.
*{
box-sizing: border-box;
}s1u6 html/css 활용
팀에 기여하고, 개발자 생태계에 기여하는 엔지니어로