멋쟁이 사자처럼 FE 스쿨 2기 - 4월 1일

16442 단어 멋쟁이 사자처럼TILTIL

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를 사랑하시는게 느껴져서 수업 분위기는 행복 그 자체였다!)
HTML- form 연습(스타벅스 회원가입)
모던 자바스크립트 Day 4 & 5

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage