From 71b42d4340b87b41d3e7468bb000bdc8084759f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=95=B4=EC=9D=B8?= Date: Wed, 27 Mar 2024 17:27:20 +0900 Subject: [PATCH] web --- css/style.css | 135 +++++++++++++++++++++++++++++----- index.html | 195 ++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 283 insertions(+), 47 deletions(-) diff --git a/css/style.css b/css/style.css index b42eb2e..e63e29b 100644 --- a/css/style.css +++ b/css/style.css @@ -13,42 +13,67 @@ header { section { background-color: #fff; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 20px; - margin-bottom: 20px; + border-radius: 8px; /*테두리 모서리 둥글게 (반지름 8px) */ + + /*그림자 효과 추가, 수평 0, 수직 4px, 블러 정도 8px, 그림자 색상: 흑색, 투명도 0.1*/ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; /*내부 여백*/ + margin-bottom: 20px; margin-left: 50px; margin-right: 50px; } h2 { - color: #c18ccf; - border-bottom: 2px solid #c18ccf; - padding-bottom: 10px; - margin-bottom: 20px; + color: #c18ccf; /*보라색*/ + border-bottom: 2px solid #c18ccf; /*하단 테두리를 두껍게(2px), solid 스타일, 보라색*/ + padding-bottom: 10px; /*하단 패딩 10px 추가*/ + margin-bottom: 20px; /*하단 마진 20px 추가*/ +} + +h3 { + color: #1E96FF; /*하늘색*/ + border-bottom: 2px solid #FF9BD2; + padding-bottom: 5px; + margin-bottom: 20px; } p { - line-height: 1.6; + /*text-align: right;*/ + line-height: 1.6; /*줄 간격*/ color: #555; } -ol { - list-style-type: none; +left { + text-align: left; + line-height: 1.6; /*줄 간격*/ + color: #555; +} + + +ol { /*순서가 있는 항목*/ + list-style-type: none; /**/ padding: 0; } -li { - display: flex; - justify-content: flex-start; - align-items: center; +li { /**/ + display: flex; /*목록 항목-> 플렉스 박스(flexbox)로 지정. 내부 요소들을 수평 정렬*/ + justify-content: flex-start; /*플렉스 박스의 주축(main axis)을 따라 내부 요소들을 시작 부분에 정렬*/ + align-items: center; /*플렉스 박스의 교차축(cross axis)을 따라 내부 요소들을 가운데 정렬*/ margin-bottom: 20px; } +lii { /**/ + display: flex; /*목록 항목-> 플렉스 박스(flexbox)로 지정. 내부 요소들을 수평 정렬*/ + justify-content: flex-start; /*플렉스 박스의 주축(main axis)을 따라 내부 요소들을 시작 부분에 정렬*/ + align-items: center; /*플렉스 박스의 교차축(cross axis)을 따라 내부 요소들을 가운데 정렬*/ + margin-bottom: 20px; + text-align: left; +} + li img { max-width: 100px; height: auto; - border-radius: 8px; + border-radius: 8px; /**/ margin-right: 20px; } @@ -57,11 +82,11 @@ a { text-decoration: none; } -a:hover { +a:hover { /**/ text-decoration: underline; } -.card { +.card { /**/ display: flex; flex-direction: column; align-items: center; @@ -71,4 +96,78 @@ a:hover { footer { text-align: center; color: #888; +} +orange{ + color: #fd5000; + padding-bottom: 5px; + margin-bottom: 20px; + border-bottom: 3px solid orange; +} +green{ + color: #0ed10e; + padding-bottom: 10px; + margin-bottom: 20px; +} + +purple{ + color: #9E329E; /*보라색*/ + padding-bottom: 10px; + margin-bottom: 20px; +} + +pink{ + color: #F088B1; /*핑크색*/ + padding-bottom: 10px; + margin-bottom: 20px; +} +red{ + color: #CD1F48; /*빨간색*/ + padding-bottom: 10px; + margin-bottom: 20px; +} +blueB{ + background-color: lightblue; /*하늘색*/ + padding-bottom: 1px; + margin-bottom: 20px; +} +grayB{ + background-color: #B4B4DC; /*회색*/ + padding-bottom: 1px; + margin-bottom: 20px; +} + +left{ + text-align: left; +} +center{ + text-align: center; +} +point { + color: gray; + border-bottom: 3px solid lightgray; + padding-bottom: 5px; + margin-bottom: 20px; + line-height: 2.0; + font-weight : bold; +} +bold{ + font-weight : bold; +} + +line { + border-bottom: 3px solid lightgray; + font-weight : bold; +} +.bg-img{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background-image : url("https://ifh.cc/g/81G2kJ.jpg"); + width:100px; height:100px; border: 1px solid black; + background-size : 100% 100%; +} + +.profile{ + } \ No newline at end of file diff --git a/index.html b/index.html index 7602152..cbd26de 100644 --- a/index.html +++ b/index.html @@ -9,31 +9,34 @@ BCSDLab Web 과제 - +
-

안녕하세요, 최준호입니다!

+

안녕하세요, 윤해인입니다!

기본 정보

-

이름: 최준호

-

학번: 2019136135

+

이름: 윤해인

+

학번: 2022136080

전공: 컴퓨터공학부

-

이메일: junho5336@gmail.com

+

이메일: woovwave8.o0@gmail.com

- Github 주소

+ Github 주소

-

인사말

-

- 안녕하세요! 공유를 좋아하는 개발자 최준호입니다.
- 저의 취미는 도전입니다. 새로운 일에 도전하는것을 항상 즐깁니다.
- 최근에는 클라이밍에 흥미를 가져봤는데 꽤나 괜찮은 취미활동이라고 생각합니다
- 검은 화면에 흰 글씨가 나오는 모습이 멋있어보여서 백엔드 트랙에 지원했습니다.
-

+

자기소개

+ + 안녕하세요. BCSD 프론트엔드 비기너 윤해인입니다.
+ 평소에는 운동과 게임을 즐기고, 작년부터 사진찍는 취미를 가져보았는데
+ 출사를 나가서 여유롭게 힐링하는 시간을 좋아합니다.
+ 머릿속에만 있는 아이디어를 서비스로 직접 설계, 디자인해서
+ 결과물을 구현해내는 점이 멋잇다고 생각해서 프론트엔드 트랙에 지원했습니다.
+ 나만의 창작물을 만드는 걸 좋아합니다.
+ 감사합니다!

+
@@ -41,36 +44,170 @@

Web 퀴즈!

  1. - HTTP Method 종류를 아는대로 설명해주세요. + Q. HTTP Method 종류를 아는대로 설명해주세요.

    -
    - {위 질문에 대한 답변을 자유롭게 작성해주세요}
    - HTML 태그를 적극 활용해도 좋습니다. -
    + + + + HTTP Method
    + : Client-Server 구조에서 request와 response가 이루어지는 방식.
    + Q. 왜 사용하는가?
    + : 리소스와 동작을 분리하기 위함.

    + + -get : data 받아오기. 리스트 조회 메서드.
    + ex) URL 입력, 링크 클릭
    + *멱등성 > 여러 번 요청해도 리소스는 변하지 않음.

    + -post : 새로운 resource 생성
    + - 성공적으로 creation 완료 > 201(Created) HTTP response응답 반환
    + - get과 비교) 보안good (데이터가 외부로 노출되지 않음)
    +
    + -put : data 수정 - 덮어쓰기 방식. - null처리
    + - client가 resource식별 가능
    + - 부분 수정 불가능
    + *멱등성

    + - patch : resource의 일부만 수정 (갱신 방식)
    + - put과 같이 resource 수정 역할 +
    - BUT resource 부분 변경한다는 점에서 차이.
    + - 갱신하기 때문에 null 처리되지 않는다.
    + - 멱등성X
    + - PATCH를 지원하지 않는 서버 > POST로 대체
    + +
    + -delete
    + : resource 제거
    + 갱신이 무조건 필요한 거 아닌가? put 보다 patch?
    + + *멱등성
    + + post + - patch 갱신의 위험성 + - ex) 은행 시스템. 돈을 보내면 잔액 변화 +
    2. + + +

  2. - 인터넷과 웹의 차이에 대해 설명해주세요. + Q. 인터넷과 웹의 차이에 대해 설명해주세요.

    -
    - {위 질문에 대한 답변을 자유롭게 작성해주세요}
    - HTML 태그를 적극 활용해도 좋습니다. -
    + + - WEB : web page들의 연결, 즉 집합체
    + - WEB은 인터넷의 일부

    + 웹과 인터넷의 차이
    + + 인터넷
    + TCP/IP 기반의 네트워크가 세계적으로 확대되어 연결된 네트워크들의 네트워크

    + WEB
    + : HTML이라는 문서 형태와 HTTP 문서 전송 프로토콜
    + => URL로 문서의 위치를 표시하는 시스템

    + - 멀리 떨어진 사람에게 문서를 주고받기 위해 탄생함.
    + - 인터넷의 여러 기능 중, HTTP 프로토콜을 사용하는 웹이 있는 것!

    + => WEB보다 인터넷이 더 광범위한 범주
     + + +

  3. - www.naver.com을 치면 무슨 일이 일어날까요? + Q. www.naver.com을 치면 무슨 일이 일어날까요?

    -
    - {위 질문에 대한 답변을 자유롭게 작성해주세요}
    - HTML 태그를 적극 활용해도 좋습니다. -
    + + +
    주소창에 "www.naver.com"을 작성 후 엔터를 치면 + Naver 메인화면이 바로 나타나게 되지만,
    + + + 사실은 사용자에게 보이지않는, 좀 더 복잡한 과정들이 있기에 결과물이 나올 수 있다.
    +
    + =====================
    + <실행 단계>
    + 1. 입력한 텍스트 정보 확인
    + 2. 네트워크 호출
    + 3. 렌더링 작업
    + 4. naver 페이지 출력
    + =====================

    + + 1. 입력한 정보 확인
    : 브라우저는 사용자가 주소창에 입력한 텍스트가 '검색어'인지 'URL'인지 판단한다.
    + -1. 검색어라면? : 브라우저) 검색 엔진의 URL에 '검색어를 포함한 주소로 페이지'를 이동시킨다.
    + -2. 만약 URL이라면? : 브라우저 엔진) 네트워크 스레드를 통해-> 네트워크 호출을 수행한다.

    + + 2. 네트워크 호출
    + Q. 브라우저가 네트워크 호출을 수행하는 이유?
    + : 브라우저가 유저에게 네이버라는 사이트를 화면에 보여주려면
    + 네이버의 HTML 문서, CSS 문서, 스크립트, 이미지 등등 각종 데이터를 가지고 있어야 함.
    + 하지만 이런 정보들은 브라우저가 아닌 네이버 서버 컴퓨터에 존재한다.
    + + => 결론) 네이버 서버와 네트워크 통신을 통해 데이터들을 가져와야한다.
    + ㄴ서버가 어딘지 알아야 하니까 - 네이버 서버가 있는 컴퓨터의 IP 주소를 파악해야한다.

    + + =======================================================
    + ➔ 네이버 서버의 주소를 알기 위한 name server와 통신
    + ➔ 알아낸 주소로 - 네이버 서버와 통신 - 원하는 데이터 받기
    + =======================================================
    +     + - 네이버 서버의 주소를 알기 위한 DNS 서버와 통신
     + 브라우저는 캐시를 조회하여 해당 웹사이트의 IP 주소를 가지고 있는지 확인해본다.
    + + 요청된 도메인 네임의 IP 주소를 찾을 수 없다면,
    + 첫번째로 자신(로컬)의 host 파일에서 도메인 네임 (naver.com) 에 대응 하는 IP 주소가 있는지 확인한다.
    + +
    URL이 host 파일 내에서도 발견되지 않으면,
    + -'네이버 IP 주소 알려줘' 라는 DNS 요청을 보낸다.
    + + 인터넷은 컴퓨터의 주소인 IP 주소를 기반으로 동작한다.

    + 하지만 우리가 인터넷을 사용할 땐 사용하기 쉽도록
    + IP 주소 대신 사용하기 쉬운 '문자로 이루어진 도메인 네임'을 사용한다.

    + + 따라서 도메인 네임 ➔ IP 주소로 변환해주는 환경 DNS(Domain Name System) 가 필요함.
    + => DNS Server/Name Server

     + + 네임 서버가 도메인 주소에 대응하는 IP 주소를 찾아준다.
    + 클라이언트는 naver.com에 해당하는 IP 주소를 요청하고 응답 받을 수 있다.

    + + - 알아낸 IP 주소로 네이버 서버와 통신하여 원하는 데이터 받기
    + : 웹 사이트를 브라우저에 띄울 수 있도록 웹 서버로부터 원하는 정보들을 받아야함.

    + + + [Q. 어떻게 받아올까?]
    + + HTTP Request를 통해 요청하고,
    + HTTP Response를 통해 받아오면 된다.

    + + 3. 렌더링 작업

     + - 네이버 서버로부터 응답받은 데이터는 바이트 형태의 텍스트 문서
    + => 브라우저 엔진이 읽을 수 없음
    + - 따라서 브라우저 엔진은 렌더링 엔진에게 해당 데이터를 해석하고,
    + 웹 페이지를 화면에 띄울 것을 요청한다.
    + + - 요청을 받은 렌더링 엔진은 받은 데이터를 바탕으로 렌더링 프로세스를 수행하고,
    + 이 과정이 끝나면 브라우저 엔진 에게 작업 완료를 알린다

    + + + 위과정을 FE 관점과 BE 관점에서 생각해보기

    + 1. FE
    + : 사용자가 직접 보고 확인할 수 있는 부분.

    + + - 웹 브라우저를 통해 요청을 보내는 것, 응답을 받고 해독하여 반영하는 부분까지 프론트엔드로 간주
    + - 즉, 유저의 naver.com 홈페이지를 보여달라는 요청을 수행하기 위해
    + 필요한 데이터, 리소스를 서버에서 조회하여 화면에 띄우는 역할

    + + 2. BE
    + : 사용자의 눈에 보이지 않아 직접 보고 확인할 수 없다. + (백엔드는 프론트엔드와 반대되는 개념)

    + + - 백엔드는 프론트엔드에서 보내준 요청을 처리하고,다시 응답을 제공해준다.
    + 프론트에서 요청하는 리소스들을 가공하여 내어주는 역할

    + + 출처1 + 출처2 +