4월이 밝았습니다.
마ㅍ.... 아기 사자들은 힘내주세요!!! 🐾
오늘의 키워드📌
- CSS
- 간단한 이력서 페이지
1. CSS
오늘 들었던 CSS 특강 수업 중 등장했던 정보들을 간략히 기록하겠다!
-
div에width값이 지정되어 있지 않다면 부모요소를 기준으로 영역이 가득차게 된다. -
왼쪽 상단부터 컨텐츠가 표현되는 이유는, 문화권의 영향을 받았기 때문이다.
(우리나라는 글을 읽을때 왼쪽에서 오른쪽 방향으로 읽어나감)
-
initial속성은 명시적인 초기값을 나타낸다! -
타입 셀렉터는 초기화 할 때만 쓰자! 스타일을 꾸미기에는 위험하다!
body { margin : 0 ... }에서body가 타입 셀렉터에 해당 -
블록 요소 보다는 블록 레벨 요소가 더 정확한 표현이다!
-
블록 레벨 영역은 기본적으로 가로축 가운데 정렬만 된다. 세로축 정렬은 안된다.
-
곤충의 구조가 머리, 가슴, 배로 구분되어 있듯이 웹 구조 또한 헤더, 메인(컨텐츠), 푸터 영역으로 구분된다.
-
css역시 몇 몇의 프로퍼티들은 상속 관계를 가진다. -
상속이 지원되는 속성은 초기화 해줄 때
inherit속성을 즐겨 써보도록 하자.
상속이 지원 안 되면initial속성을 쓰자. -
width: 100%와width: auto의 차이!
-
블록레벨 엘리먼트에 인접한 상하단
margin은 겹친다는 사실!!!!
-
선택자 우선 순위란? 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의
css속성을 우선 적용할 지 결정하는 방법!1. 점수가 높은 선언이 우선된다! 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선된다!점수의 크기는 아래와 같다.
- !important > ID 선택자 > Class 선택자 > 태그 선택자 > 전체 선택자
2. 간단한 이력서 페이지
프로필
프로필 사진이 밤 열매로 되어 있는만큼 프로필 사진 형태도 밤 열매 느낌이 나도록 border-radius: 69% 31% 35% 65% / 53% 57% 43% 47%; 값을 주었다. fancy border radius 사이트를 참고했다.
정보, 기술
정보와 기술은 ul 태그로 구조화 했고 가상 선택자 :hover 를 사용해서 색상 변화를 주었다.
푸터
푸터는 이미지 스프라이트 기법을 사용해서 구현했다.
간단한 이력서 페이지(수정)
배운 html 과 css 를 이용해서 리펙토링 해보았다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>PROFILE</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="main">
<header class="header">
<img class="profile" src="./images/profile_bam.jpg" alt="프로필사진" />
<h1>이름</h1>
<p>성장하는 개발자</p>
</header>
<section class="section">
<div class="contents">
<article class="article info">
<h2>정보</h2>
<ul class="list">
<li>이름</li>
<li>이메일</li>
<li>국가, 지역</li>
</ul>
</article>
<article class="article skills">
<h2>기술</h2>
<ul class="list">
<li>HTML Living Standard, CSS</li>
<li>JavaScript(ES6)</li>
<li>React</li>
</ul>
</article>
</div>
</section>
<footer class="footer">
<a class="icon github" href="#"></a>
<a class="icon facebook" href="#"></a>
<a class="icon email" href="#"></a>
</footer>
</main>
</body>
</html>최대한 div 태그를 남발하지 않으려고 노력했다.
아직 section 과 article 에 대해서 정확하게 개념이 잡히지 않았기 때문에 추가적인 학습을 해야겠다!
참고
- 오늘 특강해주신 이종찬 강사님 빔캠프 유튜브 주소
(이종찬 강사님 강의 실력을 아기 사자들 모두가 극찬했다! 정말 진심으로 CSS를 사랑하시는게 느껴져서 수업 분위기는 행복 그 자체였다!)
종찬님 특강은 정말 "행복~" 했어요 ㅋㅋㅋㅋ
추가적으로 initial 속성은 IE에서 지원되지 않기 때문에 피하는 게 좋다고 하셨던 것 같아요. 저는 initial 값이라는 게 있으니 각 속성을 사용할 때 MDN을 통해 확인해야 된다는 정도로만 이해하고 있습니다~