| [Front-end] (margin) 실습예제 (0) | 2022.06.23 |
|---|---|
| [Front-end] (nth-child) 실습예제 무지개 만들기 (0) | 2022.06.23 |
| [Front-end] (nth-child) 개념 (0) | 2022.06.23 |
| [Front-end] (CSS reset, CSS Normalize) 개념 (0) | 2022.06.23 |
| [Front-end] (margin, padding) 개념 (0) | 2022.06.22 |
first-child : 첫번째
nth-child(2) : "2" 번째 // ( )괄호안의 숫자만큼 해당
last-child : 마지막
| [Front-end] (nth-child) 실습예제 무지개 만들기 (0) | 2022.06.23 |
|---|---|
| [Front-end] (nth-child_v2) 개념 (0) | 2022.06.23 |
| [Front-end] (CSS reset, CSS Normalize) 개념 (0) | 2022.06.23 |
| [Front-end] (margin, padding) 개념 (0) | 2022.06.22 |
| [Front-end] (실습 예제) 이미지 6개 3*2로 정렬하기 (0) | 2022.06.22 |
CSS Reset은 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화하는 전략이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 그나마 가장 유명한 건 Eric Meyer라는 개발자가 만들어놓은 CSS reset이다. 그런데 가장 최근 업데이트가 2011년에 있었던 만큼 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율을 초래할 수 있다는 비판이 있다.
그래서 최근에는 필요한 부분만 초기화를 하여 사용하기도 하거나 CSS Normalize라는 기법을 사용하는 전략이 생겨났다.
CSS Normalizes는 브라우저 간 유저 에이전트 스타일의 오차를 줄이고, 버그만 줄이는 방향으로 스타일을 재지정하는 거다. CSS Reset는 기본값을 다 싸그리 엎는 데 반해 CSS Normalize는 기본값들을 최대한 보존하고 수정을 최소화한다.
normalize.css 는 오픈 소스이기 때문에 이 코드를 파일로 저장해 HTML에 연결해 사용하면 된다.
*** a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 Normalize 해야 한다.
| [Front-end] (nth-child_v2) 개념 (0) | 2022.06.23 |
|---|---|
| [Front-end] (nth-child) 개념 (0) | 2022.06.23 |
| [Front-end] (margin, padding) 개념 (0) | 2022.06.22 |
| [Front-end] (실습 예제) 이미지 6개 3*2로 정렬하기 (0) | 2022.06.22 |
| [Front-end] (실습 예제) 홈페이지 상단 메뉴바 구현 (0) | 2022.06.22 |
스파르타코딩클럽의 도움을 받긴 하였지만, 처음으로 나만의 개인 프로필 링크를 만들어보았다.
신기하기도 하고 재미도 있었다.
앞으로 프론트엔드 개발자가 되기 위해 더 노력해서 더 나은 프로젝트를 구현해보겠다.
링크 : https://yeomboyeon.github.io/Javascript_project_profile/
<!DOCTYPE html>
<html>
<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">
<meta property="og:title" content="염보연 - 86년 12월 21일">
<meta property="og:description" content="프론트엔드 개발자">
<meta property="og:image" content="캡처.PNG">
<title>프론트엔드 개발자 염보연</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
body {
background-color: blueviolet;
}
.profile {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 100px;
border: 2px solid white;
background-image: url(캡처.PNG);
background-position: center;
background-size: cover;
}
.main {
color: white;
font-size: 20px;
margin-top: 15px;
margin-bottom: 0px;
}
.sub {
color: white;
font-size: 15px;
margin-top: 5px;
margin-bottom: 30px;
}
.wrap {
width: 300px;
margin: 50px auto 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap > a {
width: 300px;
height: 50px;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: blueviolet;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 2px 2px 2px 2px black;
}
.wrap > a:hover{
background-color:#f2f2f2;
font-size: 18px;
}
</style>
</head>
<body>
<div class="wrap">
<div class ="profile"></div>
<h1 class ="main">프론트엔드 개발자</h1>
<p class ="sub">염보연</p>
<a target="_blank" href="https://yeomboyeon.tistory.com/">개인 블로그(티스토리)</a>
<a target="_blank" href="https://www.notion.so/537bd427f44743b5bc10a6e8a6b396a3/">Notion 노트</a>
<a target="_blank" href="https://codepen.io/JungSungHun/full/bGLQGNe/">Front-end 수업</a>
<a target="_blank" href="https://codepen.io/woooyoung/full/popONZJ">Java 수업(1)</a>
<a target="_blank" href="https://codepen.io/woooyoung/full/VwQpxvE">Java 수업(2)</a>
<a target="_blank" href="https://github.com/">github</a>
<a target="_blank" href="https://codepen.io/your-work/">codepen</a>
<a target="_blank" href="https://programmers.co.kr/?utm_source=google&utm_medium=cpc&utm_campaign=brand_prgms_pc&gclid=Cj0KCQjwxtSSBhDYARIsAEn0thTMyMj0XsgE-F1fh98Cmth-KGp4IrWX8h2-39d8D-ASusz9TMHu-1QaArz9EALw_wcB">프로그래머스</a>
<a target="_blank" href="https://studio.code.org/users/sign_in">Code.org</a>
<a target="_blank" href="https://www.typingclub.com/sportal/">타이핑클럽(영타연습)</a>
</div>
</body>
</html>margin : CSS 약식 속성은 요소 의 네 면 모두에 여백 영역 을 설정합니다.
padding : CSS 약식 속성 은 한번에 요소의 네 면에 패딩 영역 을 설정합니다 .
| [Front-end] (nth-child) 개념 (0) | 2022.06.23 |
|---|---|
| [Front-end] (CSS reset, CSS Normalize) 개념 (0) | 2022.06.23 |
| [Front-end] (실습 예제) 이미지 6개 3*2로 정렬하기 (0) | 2022.06.22 |
| [Front-end] (실습 예제) 홈페이지 상단 메뉴바 구현 (0) | 2022.06.22 |
| [Front-end] ( , br, text-decoration) 개념 (0) | 2022.06.22 |