HTML/CSS 강의 정리

✍ HTML/CSS 강의 정리

#1

• HTML/CSS 는 아주 간단한 방법으로 내 생각과 의도를 표현할 수 있어서 장점이 많음

• 전혀 다른 언어(Javascript, Python, Ruby 등)도 섞여 콜라보레이션이 잘 됨

• 단독으로 동작할 때 빛이 나고, 결과물이 누구나 접속 가능한 홈페이지라는 것이 큰 장점

• 어디서든 결과물에 쉽게 접근할 수 있고, 여러 환경, 상황에서도 실행해볼 수 있음, 강력한 접근성은 다른 시각화 도구보다 가장 중요한 포인트

• 난이도 또한 높지 않아서 문법이 아주 간단하고, 로직이 간단

• 현재, 대다수의 프로그래밍 교육은 지나친 문법 위주의 수업으로 진행되기 때문에 머릿 속에 문법을 체크하느라고, 알고리즘만 설계할 줄 알지 본인의 아이디어를 현실화 못하는 개발자가 많이 양성

• 문법이 아니라 프로젝트의 개발과 완성을 따라가면서 그때그때 필요한 지식을 우리에게 설명, 현실에 노출되어 있는 부분 위주로 수업이 이루어져야 함
  
  

#2

• 워드나 한컴오피스 만든 문서파일은 다른 언어와의 호환이 거의 불가능

• 그러나, html/css로 작성한 문서는 다른 언어와 아주 부드럽게 작용

• 여행 짐가방으로 비유를 하자면, 여행 가방은 만드는 사람은 미래 사용자를 예측해서 만듬

• 가방에는 타입1, 2, 3 등이 있고, 각 타입에는 태그가 있어 무엇이 들어있는지 확인이 가능, 각 가방의 html/css로 작성한 대제목을 태그로 불림

• <가방1>내용물입니다.</가방1> 
  <가방2><가방1>내용물입니다.<.가방1></가방2>

  -> 데칼코마니 형식으로 열고 닫는다.

  (태그도 먼저열고, 나중에 닫고, 나중에 연 것은 먼저 닫는다.)

• 'p 태그'를 많이 사용, 가장 기본 태그

• 'h 태그'의 h는 heading 은 큰 헤드라인이라는 의미, 1은 그 중에 제일 큰 것을 의미, 따라서 제일 큰 헤드라인을 표현하라는 것이 'h1'
  
  

#3

• 태그 말고도 html/css 에는 150가지 정도의 수많은 태그가 존재하는데, 보통 자주 쓰이는 태그는 약 30가지 정도로 압축

• 따라서 많이 쓰이는 몇 가지의 태그만 제대로 사용해도 html/css 문서를 만드는데 큰 지장이 없음

• 제일 많이 사용하는 태그인 html은 해당 문서가 html문서라는 것을 알려주는 태그

• 크롬 환경에서는 'html 태그'가 없어도 동작하는데 하나도 문제가 생기지 않지만, 뭔지 모를 이유로 대부분의 웹페이지에서는 없어도 되는 위 태그를 꼭 사용해주고 있음, 쌍으로 사용하고 있는게 '!DOCTYPE html 태그'

• 

• 어떠한 문서를 막론하고, 위 3가지 태그는 반드시 사용

• 문서에 대한 정보(누가 작성했는지, 문서를 실행하기 위해서 어떤 것을 참조해서 실행되어야 하는지, 문서의 제목은 무엇인지, 대표 이미지는 무엇인지, 어떤 키워드로 검색해야 나오는지)는 모두 'head 태그'에 모두 넣어줌

• 이것과 반대되는 것은 'body 태그'이고, 일반적으로 나타내는 내용들이 모두 들어감
  
  

#4

• 'footer'란 웹 페이지마다 맨 아래 공통적으로 기입된 내용을 의미(보통 쇼핑몰 맨 하단에 회사 대표, 주소 등)

• html은 문서의 요소를 구분하는 역할, 그 요소에 의미를 부여하는 역할을 함.

• css는 화면 적절한 위치에 표현하는 역할

• footer {
          text-align: center;   // 중앙 정렬(글자정렬)
          background-color: black;  // 배경색
          color: white;  // 글씨색
      }

  
  

#5

• 

• big-font 와 small-font 각 클래스 지정
  
  

#6

• footer {
      text-align: center;
      background-color: #1e1e1e;
      color: #919191;
      font-size: 12px;
  }

• https://htmlcolorcodes.com 사이트에서 색 추출

• 'div 태그'는 여러 태그들을 묶어서 css로 함께 꾸며주기 위함

• .mainbox {
      border: 5px solid #ebebeb;    (두께, 방식, 색깔)
      width: 610px;  (폭)
      text-align: center; // 박스 내용만 가운데 정렬
      margin-left: auto; // 박스 전체를 한 가운데로 정렬
      margin-right: auto; // 박스 전체를 한 가운데로 정렬
  }

  
  

#7 👊🏻👊🏻👊🏻👊🏻👊🏻

• 가장 테두리 마지막은 'Margin'
  그 안쪽은 'Border'
  더 안쪽은 'Padding'
  안의 내용은 'Content'

• 박스 모델 제대로 이해 하기
  
  

#8

• 'div 태그'는 html 요소 몇 개를 하나로 묶고, css에서 꾸미기 쉽게 하는 태그(정렬, 배경색 등)
  -> 테두리 치고, 그 안에서 꾸미기(가두리 양식)

• .name-text {                                  
      font-size: 17px;                         
      color: #7c7c7c;
      font-weight: bold;  // 폰트의 두께(light, bold, normal)
  }

• .mainbox {
      width: 610px;  // 폭
      padding: 30px; 
      margin: 30px;
      margin-right: auto; // 박스의 중앙 정렬
      margin-left: auto; // 박스의 중앙 정렬
      border: 1px solid #ebebeb; 
  }

• footer {
      text-align: center;  // 풋터 중앙 정렬
      background-color: #1e1e1e;
      padding: 20px;
      font-size: 12px;
      color: #919191;
  }

• box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);

  👇🏻
  첫 번째 숫자 : 그림자가 얼마나 뻗어나가는지 양수는 오른쪽, 음수는 왼쪽으로 뻗어나감
  두 번째 숫자 : y축으로 그림자를 이동
  세 번째 숫자 : 블러값, 흐린 정도
  네 번째 숫자 : 스프레드 값, 그림자 퍼짐 정도
  다섯 번째 숫자 : 색rgb, 투명도
  
  
  

#9

• '몬세라트' 폰트 가져올 시

• **@import** 
  **url**('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

• 포장지 : div = section = article
  
  

#10

• h1 {
      font-size: 36px;
      font-weight: bold;
      font-style: italic;   // 폰트 이탤릭 바꾸기
  }

• h2 {
      font-size: 20px;
      font-weight: lighter;
      color: #282828;
      border-bottom: 1px solid #ebebeb;    // 아래 선 생성
      margin-bottom: 16px;  // 마진 공간 띄우기
      padding-bottom: 5px; // 패딩 공간 띄우기
  }

  
  

#11

• 클래스 이름이기 때문에 .으로 시작한다.

.name-text {
font-size: 16px;
color: #7c7c7c;
font-weight: bold;
}

• 줄 간격 넓히기 -> line-height: 16px;

• text-align: left; // 왼쪽 정렬
  text-align: right; // 오른쪽 정렬

• 같은 줄에 만들려면,
  float: left;
  float: right;
  
  

#12

• html 문서 안에서 'float'은 둥둥 떠다니기 때문에 다른 글과 그림에 겹칠 수 있음, 따라서 가두리를 만들어야 함
  
  

~ 주말까지 할 일
1. HTML/CSS 강의 복습 및 정복
2. 총 실습 과제 수행 & 회고
3. 나만의 캐릭터 만들기

체력이 아직 젊은 나이인 거 같은데 수업듣는게 왜 이렇게 힘들지.. 운동해야지💪🏻

HTML/CSS 배우고 익히는데 상당 부분 얕게만 알고 있다는 것을 본인이 너무 잘 알고 있음..
주말 갈아 넣어서 폭풍 업로드 스탠바이...!