[TIL] Udemy 2일차 프론트엔드/백엔드 - HTML,CSS

강준호·2023년 12월 14일
개발부트캠프백엔드유데미유데미부트캠프유데미취업부트캠프유데미큐레이션프론트엔드

Udemy

목록 보기
2/44

HTML 은 메타데이터와 보이는 컨텐츠 로 나눌 수 있다.

보이는 컨텐츠는 본문태그와 메타데이터 사이에 있어야한다.

태그

title 태그

  • 웹페이지 탭 제목을 변경해준다.

hover

  • 동작에 따라 변하는 css
  • hover 는 가상 선택자로 마우스가 해당 위에 있으면 정의된 스타일대로.
/* 링크 위에 갔다대면 변하는 hover */
a:hover {   
    text-decoration : underline;
}

  • link 요소와 href 를 같이 사용함으로 파일의 상대 경로를 지정한다. rel 로 가져온 파일이 무엇인지 알려준다.

  • html 파일에 외부 파일이 포함되어 있거나 불러오려고 할때, 해당 파일 위치가 지정되어 있으면, 브라우저가 이런 파일들을 추가함

 <link href="daily-challenge.css" rel="stylesheet">

id 선택자

  • id 선택자를 사용하면 특정 요소를 지정할 수 있다. id 는 중복되면 안되며 유니크 해야한다.
<p id="todays-challenge">웹개발 과정 - dive into HTML & CSS</p>

목록 태그

의미론적 태그

ol(ordered list) 태그

  • 특정 순서로 이루어진 순서목록

ul(unordered list)

  • 서로 관련은 있지만, 순서가 없는 목록

목록항목

li태그

요소를 중첩한다는 것은 내 자식의 상속에 영향을 미치는것!

CSS 굵기, 사이즈, 폰트

#todays-challenge {
    color: rgb(170, 96, 83);
    font-weight: bold;
    font-size: 50px;
}
  • 픽셀(px)은 절대단위
  • rem,% 는 상대단위
<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Oswald:wght@700&display=swap"
      rel="stylesheet"
    />
  • 구글 폰트를 이용해 무료 글꼴을 추가할 수 있다.

이미지 첨부

<img src="IMG_1874.jpeg" alt="intersection-img">
  • link 와 마찬가지로 닫는 괄호 필요없다.
  • href 가 아닌 src를 사용한다.

alt

  • 이미지가 로드되지 않을때 추가하는 대체 텍스트

이미지 정렬이 어려운 이유

body {
  text-align: center;
}

  • img 태그에 바로 text-align: center 를 이용할 수 없다.

  • 텍스트와 달리 사진은 태그 내부에 컨텐츠가 존재하지 않기 때문..

  • 이미지가 있는 body 에 text-align: center 을 넣는다면 내부 컨텐츠로 취급되어 중앙정렬이 된다.

HTML & CSS 파일 이름 규칙

  • 특수문자는 '-' 대시만 허용
  • 모두 소문자 구성

HTML

  • 일반적으로 로드될 페이지의 주요 목적이나 내용을 설명하는 이름을 지정하는 것이 좋습니다.
  • EX) 사용자의 장바구니 콘텐츠를 표시할 HTML 파일이 있는 경우 cart.html
  • 많은 온라인 상점 제품을 표시하는 역할을 하는 HTML 파일의 이름은 products.html

CSS

페이지별 CSS 파일의 경우

  • HTML 파일 이름을 반복.

여러 HTML 파일에 속하는 CSS 파일의 경우

  • base.css와 같은 일반 이름.
  • cart.html 및 cart.html 모두에 대한 online-shop.css와 같이 CSS 파일이 속한 HTML 파일의 일반 용도를 설명할 수 있습니다

개발 서버

VSCODE 익스텐션 중 Live Server

  • 이것을 설치하면 로컬 127.0.0.1 에서 간단한 웹서버를 띄울 수 있다.

로컬 서버

  • 로컬 서버는 일반적으로 다른 프로세스에서 사용하지 않는 모든 포트를 사용할 수 있다.

  • 그래서 :8080 :5500 :3000 을 사용하는것!

CSS 속성

상속

  • 특정 규칙이 부모에서부터 자식으로 상속된다.

계단식(cascading) 스타일 시트

  • 여러 규칙을 동시에 적용

  • 하나의 요소에 여러개의 규칙을 적용할 수 있다.

  • 두 개 이상이 중복될 경우에는 최근에 적용한 스타일이 우선함.

li{
    list-style: none;
    list-style: square;
}

li {
  list-style: square;
  list-style: none;
}

우선순위

  • 더욱 구체적인 선택자에 적용된 규칙이 더 우선한다.
  • ol 과 li 중 li 이 더 우세하다.

CSS 박스 모델

  • 각 요소에는 컨텐츠가 있다.
  • 컨텐츠 박스를 보면 박스테두리의 공간을 박스라고 한다.

Border,Padding, Margin, Content 의 정의

Padding 의 순서는 시계방향!

Auto 기능으로 정렬을 할 수 있다.

ol {
  list-style: none;
  width: 500px;
  margin: 36px auto 0 auto;
  padding:0;
}

HTML 세부 구조

선택자 & 결합자

선택자

Type 선택자

  • 예를 들어 div는 모든 'div' 요소를 선택하고 h1은 문서의 모든 'h1' 요소를 선택합니다.
  • type 선택기는 특정 유형의 모든 요소에 공통 스타일을 적용하는 데 유용.

ID 선택자

  • 고유한 'id' 속성을 기반으로 요소를 타겟팅합니다.

  • 해시(#) 기호와 그 뒤에 ID 값이 표시됩니다.

  • 예를 들어 #navbar는 id="navbar"가 있는 요소를 선택합니다.

  • ID는 페이지 내에서 고유하므로 이 선택기는 문서에서 한 번만 나타나는 요소의 스타일을 지정하는 데 사용됩니다.

Class 선택자

  • class 속성을 기반으로 요소를 대상으로 합니다.
  • 마침표(.)와 클래스 이름으로 표시됩니다.
  • 예를 들어 .button은 class="button"이 있는 모든 요소를 선택합니다.
  • ID와 달리 클래스 선택기는 문서 전체의 여러 요소에 적용할 수 있으므로 다목적입니다.

그룹 선택자

  • 쉼표로 구분하여 여러 선택기에 동일한 스타일을 적용할 수 있습니다.

  • 예를 들어 h1, h2, .highlight는 모든 'h1' 및 'h2' 요소뿐만 아니라 class="highlight"가 있는 모든 요소에 동일한 스타일을 적용합니다.

  • 이는 CSS 코드의 중복성을 줄이는 좋은 방법입니다.

결합자

  • 서로 다른 선택자의 조합

  • 자식 결합자는 두 요소 사이에 공백 대신 '>' 사용한다.

Descendant

  • 이 결합자는 두 선택자 사이에 공백( )으로 표시됩니다.
  • 지정된 요소의 하위 요소인 모든 요소와 일치합니다.
  • 예를 들어 div p 선택기에서 공백은 하위 조합기이며 < 내에 중첩된 깊이에 관계없이
    요소 내부에 있는 모든 요소를 선택합니다. div>.

Child

  • 하위 조합자는 두 선택자 사이에 '>' 기호로 표시됩니다.
  • 요소의 직계 하위 항목에만 일치합니다.
  • 예를 들어 ul > li는 ul 요소의 직계 하위 요소인 'li' 요소만 선택합니다.
  • 'ul' 내부의 다른 요소 내에 더 아래에 중첩된 'li' 요소는 선택되지 않습니다.

블럭요소 vs 인라인 요소

블럭요소

  • 한 줄의 전체 너비를 다 차지 => 새로운 행

인라인 요소

  • ex) 링크,버튼,이미지,스팬
  • 끊기지 않고 계속 이어감.

인라인 블럭

  • 인라인 + 블럭.
  • 인라인 요소에도 공간 확보 가능.
display: inline-block;

마진 겹침 현상

  • 블럭 요소, 인접한 수직 여백에서만 발생

  • 항상 더 큰 여백이 우세하다!

박스 그림자 속성

box-shadow

  • 순서는 X축 오프셋, Y축 오프셋, 테두리 흐림, 그림자 색상

  • 그림자 색상에서 투명도 조절 하고 싶다면 rgba() 의 마지막 값을 사용해.

QnA

멘토님께서 가장 즐겁게 참여하셨던 프로젝트에 대해서 들어볼 수 있을까요?

  • 고생한 프로젝트들이 기억이 남는다.

  • 트래픽이 적은 경우는 기억이 잘 나지 않아. 사용자가 많고 데이터가 많을 수록 양쪽 다 트래픽이 많을때가 좋은 경험을 많이 느꼈습니다.

  • 데이터베이스 옵티마이져 최적화는 생각보다 우리의 의도대로 안움직여 => 데이터베이스 장애. 데이터베이스에서 스토워드 프로시저로 로직을 많이 구현한

  • 데이터베이스 이해도가 떨어지면 이러한 문제가 많을텐데 => DB 공부하게됨

  • 데이터베이스를 잘 다루는 것이 백엔드의 핵심

  • 클라우드 서비스 개발. blocking 동작을 너무 많이한게 성능이슈가 있어서 개선한것이 성능체크도하고..

  • 비동기 매커니즘을 지금은 잘 이해하고 있는데, 2010년의 웹개발자들은 비동기 매커니즘을 잘 몰랐었거든. => 스터디하고 배우는 과정이 기억남.

DB 효율성을 높이기 위해 무엇을 하셨는지?

  • 쿼리를 묶어서 이 쿼리 묶음 전체가 성공하냐 실패하냐를 할 수 있고

  • 실패가 난 쿼리가 무엇인지에 대한 로깅을 했고

  • 노드를 쓸때 비동기 루프 이해도가 매우 높아야해.

  • FastApi 가 대세가 될수도 있고,

  • 코틀린 스프링

멘토님께서 기억에 남으시는 힘들었던 프로젝트 경험이나 오류 해결 경험에 대해서도 말씀해주시면 감사하겠습니다!

  • 게임서버 개발을 했었는데, Java 의 경우는 에러가 날때 로그가 나는 경우와 달리 씨쁠쁠은 사후 분석을 위한 근거도 못보고 죽을 때가 많아. 그래서 비동기를 구현하느라 힘들었다.

  • 동기로 만들면 성능은 안좋지만 이슈는 없어. 반면 비동기로 만들면 성능은 좋지만 이슈가 많기 때문에 공부가 필요해.

  • vpc 구성 네트워크 장치 일부를 클라우드 환경에 있으니 구현하게 됐는데, 네트워크 장치들이 되게 미묘하고 어려워. 이처럼 장치가 끼면 항상 어렵다. 하드웨어를 쓸때 좀더 긴장하게되는 경험

Git 을 처음에 공부한다면 어떤 공부방식으로 공부할지 여쭤보고 싶습니다. 버전관리 시스템을 어떻게 잘 쓸지?

  • 다른 것들에 대한 이해도가 중요하다. 몇가지 규칙을 외우는 수준으로도 충분한거 같다.

  • 주니어 시절 공부할때 역분석이 도움이 많이 됐어. 원리를 파악함에 있어, 내가 그걸 만든다면 어떻게 할까? 를 주제로 잡았고. 이 큰 매커니즘을 이해 하기에 Git 은 중요한거같아.

  • 나라면 이렇게 하겠다. 00 하게 구성되는 어플리케이션으로 만들겠다

  • Git Fork 툴을 통해서 사용법을 익혀보자!

  • 협업을 할때 충돌 나고 하는걸 그래야 공부할 수 있어

엠큐

이벤트 루프
sql 라이트를 써서 sv 를 만들어본다.

fastapi

actions 성 API

profile
강준호
이전 포스트

[TIL] Udemy 1일차 프론트엔드/백엔드 - HTML,CSS

다음 포스트

[TIL] Udemy 3일차 프론트엔드/백엔드 - HTML,CSS

0개의 댓글