[스파르타 코딩클럽] 개발일지 1주차 "모던심플 초대장"
1주 차 코딩 개발일지_정적 웹페이지 만들기
처음이라 뼈대인 html과 꾸미기인 css를 배웠다.
하라는 대로 따라서 하니 쉽게 했지만
나중에 혼자 할 수 있을지 모르겠다.
나중에 기억하기 위해서도 개발일지가 필요할 거 같다
>>시작하기
예전에 배운적이 있는데 조금 하다 포기하고 하니
처음부터 다시 시작하는 느낌이다.
비주얼 코드도 있으나, 새 마음으로 시작하기 위하여 파이참을 깔았다.
head 안에 있는 건 머리말 위쪽 헤드,
body 안이 몸통으로 웹페이지 내용
보통 body에 div로 상자를 만들고
class="이름"으로 명찰을 달아준 다음,
head에 있는 style 안에
.이름 {} 형태로 불러서
중괄호 안에 꾸밀 내용을 넣는다.
>>기본적인 html
div : 구역 나누는 박스
p : 문단
h1 : 제목 태그
페이지마다 하나씩 써줘야
구글이 제목으로 인식하므로
검색이 잘 된다.
h2 : 소제목
>>기본적인 CSS
배경
background-color
background-image
background-size
*처음에는 배경 범위가 안 보이기 때문에 배경색을 지정해두면 알아보기 편하다
강사님 처럼 그린으로 설정하고 코딩하고 나중에 지우기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('');
background-position: center;
background-size: cover;
->배경 이미지 넣고 가운데 정렬
하고 싶다면 위 세 줄 세트 붙여다가
''사이에 이미지 url 넣으면 된다!
사이즈
width
height
*단위는 px
폰트
font-size
font-weight
font-family color
*구글 웹 폰트 링크
선택해서 @import로 체크하고
<style></style> 태그 안 링크 복붙,
css 탭 코드는 전체 적용*{} css에 복붙
간격
margin
padding
*상 우 하 좌 순서대로 px쓰면 된다
페이지 정중앙으로 정렬하려면
좌 우에 px 대신 auto라고 쓰면 됨
모서리 둥글게
border-radius
**주석 달기
코드를 임시로 작동하지 못하게 하거나,
간단한 메모를 남겨두고 싶을 때 사용.
- </aside>
- 단축키: 라인들을 선택 → ctr + /
개인적으로 아직 주석 달고 하는 것이 익숙하지는 않다.
파일 분리하기
css가 너무 길 때 다른 파일로 분리하고
아래 코드만 넣으면 한 줄로 가져올 수 있음.
style.css 파일을 같은 폴더에 만들고, head 태그에서 불러온다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
이것은 책에서 보았는데, 갑자기 생각이 났다.
본격 CSS 꾸미기
부트스트랩 컴포넌트 5.0 url
여기서 가져와서 적당히 조금씩 바꿔다가
사용하면 간-편
디스플레이 플랙스
: 내용물 정렬하는 코드
아래 4줄이 세트다.
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
예시)
<style>
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
내용물을 세로로 정렬해 줌
column 대신 row 쓰면 가로 정렬
이렇게 배운 것들을 토대로 만든 페이지는
깃허브(github)에 올리고 배포해서 언제든 볼 수 있다.
다음주도 더 열심히 코딩
모두들 새해 복많이 받으세요