열심히 살기 1일차
오늘 할 거
- 라라 HTML CSS 복습
- 조코딩 JS, 라라 JS 듣기
- 영단어 1일차 복습 + 2일차 공부
방학 동안 하고 싶은 일
- 경제기사 300제 읽기
방학 동안 해야할 일
- 프로젝트 하나 완성
- 진로 비슷한 분야로 일하기
- 토익 영단어 공부하기
다음 학기까지 해둬야 할 일
- 토익 800 이상
- 정처기 미리 공부해두기
- 스펙 쌓아두기 -> 구체화 해둘 것
HTML 공부 1일차
- 영역 구분할 때에는 div 태그 사용
- 각 태그에 class를 부여하여 독립적인 태그로 사용 가능
- class를 css에서 꾸며줄 때에는 .(콤마) 사용
<html>
<div class="say-hi">
<p>안녕하세요</p>
<p class = "hi">안녕하세요</p>
</div><CSS>
.say-hi {
text-align: center;
}
p {
text-size: 40px;
}
.안녕하세요 {
text-size: 20px;
}- Box Model은 Margin, Border, Padding, Content 4가지로 구성
- width, height는 content의 크기를 조정
- 각 박스 모델은 기본적으로 동서남북 방향 모두 크기를 키운다
- 박스를 중앙정렬 할 때에는 박스모델-방향: auto 을 사용하면 된다.
기본적으로 right과 left를 사용하는 모양
margin-right: auto
margin-left: auto- 박스 그림자를 지정해주는 문법은
box-shadow: x-position y-position blur spread color (색깔이름, 색깔코드, rgba)
rgba 같은 경우는 (r, g, b, a(투명도))로 설정하면 된다.
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1); # 완전히 까만 그림자- 문서에서 @import를 사용하여 구글 웹 폰트를 적용할 수 있다.
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');- 문서 전체에 같은 내용을 적용할 때에는 * 사용
* {
font-family: Montera;
}- div, article, section은 기능에 차이는 없지만 sementic html에 의해 구분되는 느낌
- 박스 안에서 선을 긋고 싶다면 border-bottom 쓰기
- box-방향 사용하여 여백을 줄 수 있다.
ex) margin-top: 14px; / padding-bottom: 24px; - 줄 간격은 line-height로 줄 수 있음, 일반적으로 16px이 이상적??
- 요소를 좌우 정렬 하고 싶을 때에는 float 속성을 사용한다.
예를 들어 제목을 왼쪽에, 년도를 오른쪽에 설정해주고 싶으면
.name-text {
float: left;
}
.year-text {
float: right;
}위와 같이 해주면 된다.
단, float 속성 같은 경우 다른 속성과 구분이 되지 않는 특징이 있다. 다시 말해 float를 이용하여 좌우 정렬을 했더니 다른 요소와 겹쳐서 표시될 수 있다는 것...
- 이것을 해결하기 위해서는 overflow: hidden 속성을 사용해주면 된다.
overflow: hidden은 float 속성에 다른 태그가 영향을 받지 않게 해준다.
<section>
<h2>EXPERIENCE</h2>
<div class = "float-wrap">
<p class = "name-text">Awesome Programming Company</p>
<p class = "year-text">2020-2022</p>
</div>
</section>.name-text {
float: left;
}
.year-text {
float: right;
}
.float-wrap {
overflow: hidden;
}-
overflow: hidden 속성을 재사용해주기 위해서 다른 영역에도 똑같이 div로 묶어주어야 한다.
-
이미지를 추가하기 위해선 img 태그를 사용
<img src="이미지의 주소">이미지의 주소는 같은 레포지토리에 있는 파일이나 링크를 걸 수 있다
-
이미지의 크기 또한 css에서 weight, height로 조정 가능
-
만약에 이미지를 클릭하면 해당 웹사이트로 이동하고 싶을 때에는 a 태그를 사용하면 된다
<a href="www.naver.com"><img src="naver.png"></a>a 태그 사이에는 이미지가 들어가도 되고, 텍스트가 들어가도 됨
이력서 직접 만들어보기
Technologically solve everyday challenges