문제 1. URL의 구조에 대해서 설명해주세요.
Scheme:domain/subdomain?query
Scheme: 해당 페이지에 어떤 형식으로 접근하는가? 주로 통신규약을 나타낸다. 대표적으로 Http와 Https가 사용되며 utp, ftp 등의 형식도 존재함.
Domain: 주로 a.b.c 형태로 나타낸다. a에는 www가 주로 사용되지만, 페이지의 용도 등에 따라 달라진다.
예시) http://www.naver.com은 네이버의 기본 도메인이지만 블로그의 경우 blog.naver.com의 형식을 따른다.
b는 주로 해당 페이지의 대표 이름을 나타낸다.
c는 해당 도메인의 소유형태?를 나타낸다. com은 상업회사, org는 비영리단체 등. kr, jp 등 어느 나라의 소속인지를 나타내기도 한다.
각 도메인의 a, b, c는 명확히 정해진 형태가 있는 것이 아니라 관례적인 형태가 있는 것이므로, 원한다면 특이한 형태로 변경될 수 있다.
subdomain: 해당 도메인의 메인이 되는 페이지(디렉토리)로부터 어느 하위디렉토리에 속하는지를 나타낸다. 대표적으로 블로그의 경우 blog.naver.com/유저아이디 의 형태를 띄는데, blog.naver.com의 하위에 각 유저아이디의 이름으로 하위 디렉토리가 생성되어있고 해당 페이지에 접속하는 것이라고 볼 수 있다.
query: 임시적으로 전달되는 값. 주로 검색 등에서 어떤 값을 검색하는가 라던가, 무슨 값을 입력받았는지 등을 URL에 표기한다.
문제 해설
- Scheme 스킴은 URL에서 자원에 접근하기 위해 사용되는 프로토콜을 나타냅니다. 스킴은 자원에 대한 접근 방식이며, 일반적으로 웹 페이지에 접근할 때는 http나 https가 사용됩니다.
- Host 호스트 이름은 웹 서버의 주소를 나타내며, 보통 도메인 이름이 사용됩니다. 호스트 이름은 인터넷 상에서 컴퓨터나 서비스를 찾기 위해 사용되며, IP 주소로도 표현될 수 있습니다. 도메인 이름은 Subdomain, Secondary Domain, Top-Level Domain으로 이루어져 있습니다.
- Path 경로는 서버에서 자원의 위치를 나타냅니다. 경로는 슬래시(/)로 구분된 여러 세그먼트로 나누어질 수 있으며, 웹 서버의 디렉토리 구조를 반영합니다.
- Query 쿼리 문자열은 웹 서버에 제공되는 추가 파라미터를 포함하고 있으며, 주로 데이터 검색, 필터링 또는 기타 옵션을 제공하는 데 사용됩니다. 쿼리 문자열은 ?로 시작하고, 파라미터는 &로 구분됩니다. 각 파라미터는 키=값 형식으로 구성됩니다.
- Anchor 앵커는 URL에서 페이지 내의 특정 섹션으로 직접 점프하기 위해 사용됩니다. 주로 문서 내의 특정 위치를 가리킬 때 사용되며, # 기호로 시작합니다.
Host, Path를 Domain으로 잘못 기억하고 있었음. Scheme, Query는 제대로 기억하고 있었고, Anchor는 떠올리지 못했음.
각 부분이 나타내는 의미는 제대로 알고 있으니 명칭을 제대로 기억할것.
문제 2. DNS에 대해서 설명해주세요.
Domain Name System
각 웹페이지를 전송해주는 서버는 각각의 IP값을 가진다. 허나 이 IP값을 각각 외워서 입력하는 것이 힘들 뿐 아니라, 해당 페이지가 어떤 페이지인지 직관적으로 알기 어렵기 때문에 이 IP값을 자연어의 묶음 형태로 매칭시켜서 변환해주는 시스템이다.
1.2.3.4라는 ip값을 가진 페이지가 codeItTest라는 이름을 가진, 시험을 보는 웹페이지이고 이 웹페이지의 2번 시험지로 이동한다고 한다면 1.2.3.4/2page와 같은 형태로 접근이 가능하다. 하지만 의미를 알기 어렵기 때문에 1.2.3.4와 http://www.codeItTest.com을 매칭시켜두면 DNS를 통해 http://www.codeItTest.com/2page로 접근하면 같은 페이지에 접근할 수 있는 것이다.
문제 해설
DNS(Domain Name System)는 인터넷의 전화번호부와 같은 역할을 하는 시스템입니다. 이 시스템은 사람이 읽을 수 있는 도메인 이름(예: www.example.com)을 컴퓨터나 다른 네트워크 장치가 이해할 수 있는 IP 주소(예: 192.168.1.1)로 변환합니다. DNS는 인터넷에서 웹사이트에 접속하거나 이메일을 보낼 때 필수적인 역할을 하며, 사용자가 도메인 이름을 입력하면 해당 이름과 연결된 서버의 IP 주소를 찾아주는 과정을 담당합니다.
제대로 기억하고 있음. 예시를 좀 더 현실적인 형태로 쓰면 좋았을 것 같음.
문제 3. CSS에서 Box Model이란 무엇이며, 각 구성 요소의 역할은 무엇인가요?
css의 요소들은 기본적으로 내용에 해당하는 content, 경계선에 해당하는 border를 가진다.
이 border와 content 사이에 있는 내부 여백을 padding이라 한다.
반대로 각각의 요소 사이의 외부 간격(border과 border 사이의 간격)을 margin이라 한다.
이를 바깥쪽부터 표현하면 아래와 같이 표현된다.
margin | border | padding | content | padding | border | margin
문제 해설
CSS Box Model은 웹 페이지에서 HTML 요소를 시각적으로 렌더링하는 데 사용되는 모델입니다. 이 모델의 구성 요소는 콘텐츠, 패딩, 테두리, 마진으로, 각각 콘텐츠 영역, 내부 여백, 테두리 선, 외부 여백을 의미합니다.
제대로 기억하고 있음. margin은 서로 상쇄될 수 있다는 것도 같이 기억해두자.
문제 4. CSS의 Cascading에 대해 설명해 주세요.
css는 웹페이지의 스타일을 다양한 속성과 값으로 설정하는데, 작성하다보면 의도적이든 아니든 같은 요소의 같은 속성에 다른 값을 설정하게 되곤 한다.
이 경우 이 중 어떤 값이 최종적으로 적용되는지를 결정하는 것을 Cascading(종속)이라 한다.
(아래부터 '같은 요소의 같은 속성'을 설정값이라 함)
기본적으로 우선순위가 같은 설정값이 여럿 있다면 나중에 선언된 값을 최종적으로 적용한다.
h1 { font-size: 16px }
h1 { font-size: 32px }
이와 같은 css가 있다면 나중에 선언된 32픽셀이 h1의 글꼴 크기가 된다.
하지만 나중에 선언된 값이라 하더라도 우선순위에 따라 먼저 선언된 값이 적용되기도 한다.
h1#id { font-size: 16px }
h1 { font-size: 32px }
이와 같이 설정되어 있다면 #id에 해당하는 h1의 글꼴 크기는 16픽셀이 된다.
이 우선순위 값은 (id class 속성)갯수를 기준으로 결정된다.
div#id.class1.class2 {}
위 선택자의 경우 (1, 2, 1)의 우선순위를 가진다. 위 선택자와 (1,1,1)의 우선순위를 가진 선택자가 경쟁한다면 (1,2,1)이 더 큰 값이기 때문에 위 선택자가 최종적으로 적용된다.
반대로 (2, 1, 1)의 우선순위를 가진 선택자가 경쟁한다면(물론 id를 2개 적용하는 것은 구조적으로 좋지 않다) class보다 id의 값 우선순위가 크기 때문에 (2,1,1)의 우선순위를 가진 선택자가 최종적으로 적용된다.
문제 해설
Cascading은 CSS에서 스타일 규칙이 어떻게 결합되어 최종적인 스타일이 결정되는지를 설명하는 메커니즘입니다. 이는 "폭포수"처럼 여러 스타일 규칙이 층을 이루면서 결합되는 방식을 의미합니다. Cascading의 주요 목적은 충돌하는 스타일 선언을 해결하는 데 있으며, 다음 세 가지 주요 요소에 의해 결정됩니다:
- Specificity (특수성): 선택자가 더 구체적일수록 우선순위가 높습니다. 예를 들어, ID 선택자는 클래스 선택자보다, 클래스 선택자는 태그 선택자보다 더 강력합니다.
- Importance (중요도): !important 규칙은 해당 스타일을 다른 모든 일반 규칙보다 우선시합니다.
- Source Order (소스 순서): HTML 문서에 나타나는 순서에 따라 스타일이 적용됩니다. 충돌하는 규칙이 있을 경우, 나중에 선언된 스타일이 우선적으로 적용됩니다.
이 규칙들은 스타일 시트의 복잡성을 관리하고, 개발자가 의도한 디자인을 정확히 반영할 수 있도록 돕습니다.
캐스케이딩의 원래 의미를 언급하면 설명이 좀 더 쉬울 것. 우선순위를 결정하는 요소들의 이름을 명확히 기억하고 서술하자. 특수성 예시로 id 선택자를 2개 이상 사용한 것은 부적절했다고 보임. 중요도 요소를 서술하지 않았음.
문제 5. 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.
html은 HyperText Markup Language의 약자이다.
즉, html은 근본적으로 마크업 언어이므로 해당 문서의 '구조적 의미'를 서술하는 것이 주된 역할이다.
시맨틱 태그는 그 역할에 충실한 태그라 할 수 있다.
기능적으로 해당 태그들은 div 태그와 차이가 없지만 header 태그는 해당 영역이 머릿말 영역임을, footer는 꼬릿말 영역임을, article은 해당 영역이 문서에 해당하는 내용임을 명시적으로 나타내어 준다.
이런 시맨틱 태그를 이용해 만들어진 html문서는 문서를 직접적으로 읽어야 할 때 읽는 상대방이 구조를 더 이해하기 쉽게 해준다.
html을 보고 개발해야하는 개발자라면 해당 영역이 어디에 위치하고 어떤 의도로 사용되었는지 빠르게 인식할 수 있고, ai와 같은 컴퓨터가 해당 페이지를 읽게 된다면 div태그로만 구성된 문서보다 해당 요소의 위치를 명확하게 인지할 수 있기 때문에 페이지를 음성으로 읽어주고 이용하는 서비스를 제공한다 했을 때 보다 쉽게 요소 사이를 인지하고 이동할 수 있게 해줄 수 있다.
문제 해설
시맨틱 태그는 HTML5에서 도입된 구조적 마크업 요소로, <article>, <section>, <nav>, <header>, <footer>와 같은 태그들을 포함합니다. 시맨틱 태그를 사용하는 이점은 다음과 같습니다:
- 접근성 향상: 스크린 리더와 같은 보조 기술이 문서의 구조를 더 잘 이해하고 사용자에게 적절한 정보를 제공할 수 있습니다.
- 검색 엔진 최적화 (SEO): 시맨틱 태그는 검색 엔진이 페이지의 콘텐츠를 분석하고, 관련 콘텐츠를 사용자에게 제공하는 데 도움을 줍니다.
- 코드의 가독성 및 유지보수 향상: 코드가 자기 설명적(self-descriptive)이 되어, 다른 개발자들이 소스 코드를 이해하고 수정하는 데 시간을 절약할 수 있습니다.
제대로 기억하고 있음. SEO에 관해서 좀 더 명확히 서술하면 좋았을 것 같다.
'CodeIt Fs 2nd > 시험' 카테고리의 다른 글
| 3주차 시험 (0) | 2024.08.14 |
|---|