스파르타 무료코딩강의 정리

주요태그

<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<h1>h1은 제목이에요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요. </h3>
<a href="https://spartacodingclub.kr/"> 하이퍼링크 </a>
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/>  
<input type="text">
<button>버튼입니다.</button>

 

태그 이름 붙이기

<h1 class="title">h1은 제목이에요.</h1>

(css) 명칭 붙인 대상에만 색상적용하는법

.title {
	color: red;
}

 

(css) 배경색 적용

body {
    background-color: #44398A;
}

(css) 기본적인 설정법

.profile {
    width: 100px;
    height: 100px;

    border-radius: 100%;

    border : 2px solid white;

    background-image: url('르탄이.png');
    background-position: center;
    background-size: cover;
}

 

<div class="profile"></div>

너비, 높이, 원형깍기 범위, 윤곽선주기, 이미지삽입, 이미지 위치설정, 이미지 사이즈설정

 

폰트색상 및 사이즈 설정

.main {
    color: white;
    font-size: 20px;
}
.sub {
    color: white;
    font-size: 14px;
}

<h1 class="main">르탄이</h1>
<p class="sub">코딩.. 좋아하세요?</p>

 

div로 묶어서 가운데 정렬

.wrap {
    width: 350px;
    margin: 30px auto 0px auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="wrap">
    <div class="profile"></div>
    <h1>르탄이</h1>
    <p>코딩.. 좋아하세요?</p>
</div>

 

링크정렬

.wrap > a {
    font-size: 14px;
    font-weight: bold;
    color: #44398A;

    background-color: white;
    border-radius: 8px;

    box-shadow: 3px 3px 5px 0px black;

    width: 300px;
    height: 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 10px;
    text-decoration: none;
}

 - a태그

<a target="_blank" href="URL주소">해당링크 보여지는 이름</a>

target="_blank" 새 탭에서 열기

target="_self" 현재 탭에서 열기

href="주소" 링크하는 주소

 

 

폰트넣기

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
    font-family: "Pretendard",serif;
}

구글 폰트링크

 

• OG 태그 수정하기
• ⇒ 카카오톡, 페이스북에 공유했을 때 보이는 이미지!

<meta property="og:title" content="르탄이 링크 모음!">
<meta property="og:description" content="어서와 코딩은 처음이지?">
<meta property="og:image" content="르탄이.png">

 

스파르타코딩클럽 무료강의 보면서 정리중.