추석에 코딩 공부 할 사람 ->
https://spartacodingclub.kr/hip
스파르타코딩클럽 무료 강의 후기 #힙한취미코딩
사실 난 생존 코딩인데…
스파르타 무료강의 두번째 차. 두번 들으니 이제 이해가 조금 가는 것 같지만
여전히 반복학습이 중요하여 한번 더 도전!
첫번째 강의 결과물
이렇게 포트폴리오 1개가 추가되었다.
사용한 코드들을 토대로 정리를 할 것인데, 아직 클라스, 연산자, 객체 어쩌고 이런 용어가 정립이 안되서 맘대로 쓴다. 이거 보고 헷갈리시는 분 없으시길..
사용한 에디터: 비주얼 코드
시작: ! 또는 html:5 엔터 시, head 자동완성
Head 부분
<!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>나의 추억거리를 공유합니다</title>
<meta property="og:title" content="송혜이 님의 추억사진"/>
<meta property="og:description" content="내가 만든 첫번째 웹페이지!"/>
<meta property="og:image" content="image.jpg"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;700&display=swap" rel="stylesheet">
<style>
Meta property는 카톡 메시지 보낼 때 보이는 부분이다.
Meta charset, name, http-equiv 는 호환성
Link rel은 폰트 – fonts.google.com 에서 따왔다.
Style 은 헤드에 위치
첫번째로, .mystyle 클라스 실현 시:
<style>
* { *은 스타일이 적용되는 모든 클래스에 적용하는 것 Font를 적용시켜 주었다.
font-family: 'Gothic A1', sans-serif;
}
.mytitle {
display: flex;
flex-direction: column;
//Display: flex; - flex box, container 적용. inline과 block 등 어쩌고 개념 어려워.. float은 또 뭐지? ㅠㅜ
Flex-direction: colum – 가로로 변환 시에는 row //
align-items: center;
Align-items: center – 박스의 세로 축 중앙 정렬
flex-start \ 기본값. 위쪽에 배치
Flex-end \ 아래쪽 배치
justify-content: center;
// Justify-content: center – 가로 축 기준 좌우 정렬
Flex-start \ 기본값. 왼쪽 정렬
Flex-end \ 오른쪽 정렬
Space-between \ 좌우로 고르기 퍼트림
Space-around \ 극좌우에 자리를 주고 좌우로 고르게 퍼트림//
margin-top: 30px;
} // 윗부분 여백
.mytitle의 바디 부분
<div class="mytitle">
<h1> 나의 추억거리를 공유합니다</h1>
<a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition" target="blank"> 모든 수강생들의 추억 보러가기 >
</a>
</div>
“모든 수강생들의 추억 보러가기” 버튼 부분 style:
.btn {
width: 300px;
height: 40px;
border: 2px solid #e8344e;
text-decoration: none;
text-align: center;
line-height: 40px;
color: #e8344e;
font-weight: bold;
border-radius: 40px;
border 경계선 굵기– 선종류 – 색깔
text-decoration: underline, color, overline, none 등. None을 써서 글씨만 나타남
아래와 같이 할 수도 있다.
Text-decoration: 텍스트 주변을 장식하는 줄의 색, 밑줄윗줄, 줄스타일, 굵기
None이 아닐 경우 밑줄이 기본값으로 생성된다.
text-decoration: none ;
text-decoration: green wavy underline ; //초록색 wavy한 underline이 생겼다.
Text-align: star, left (좌측정렬) right, end(우측정렬) , center (중간정렬) , justify(양측정렬)
Line-height는 상하 정렬이라고 볼 수 있다. Box height와 맞춰주면 되겠다.
color: #e8344e;
font-weight: bold;
font weight
border-radius: 40px;
박스가 직각이 아니고 둥글게 만들어주는 border-radius
.btn:hover {
background-color: #e8344e;
color: white;
}
Background-color는 빨간색, color 글자색은 하얀색
이거만 하는데 한세월이구나. 기본기가 중요한 것을 새삼 깨달았다ㅠㅠ
다음 편에 계속
추석에 코딩 공부 할 사람 ->
'프로그래밍 공부 > 프론트엔드' 카테고리의 다른 글
| 생활코딩/ Python 조건문3 (elif) (0) | 2021.10.14 |
|---|---|
| 생활코딩/ Python 조건문 1,2 (if, else) (0) | 2021.10.14 |
| Java Script/ 함수의 기초 function (0) | 2021.10.05 |
| Java Script/ Switch 문, prompt, alert (0) | 2021.10.04 |
| html5, css3 1. 페이지 구조와 작성법 2020 (0) | 2021.09.27 |
