What is the difference between HTML and CSS?
- HTML builds the sematic structure of your web page while CSS is responsible for providing styles
Why do we separate HTML and CSS?
the seperation of structure(content) from presentataion)makes it easier to
- maintain sites
- share style sheets across pages
- tailor pages to different enviornments
What are classes and IDs (and how are they different)?
- IDs are unique while classes are not
What are elements, tags, attributes?
<tag attribute:"value">content</tag>
- elements are consisted of start and end tags and content
- tags markup the start and end of an element
- attributes, which are placed in the start tag, describes the property of an HTML element in detail
What are forms and div?
<form>creates forms for getting input<div>defines a content block, in other words, creates division or section in an HTML document
For accessibility in HTML, what is the attribute used to describe an image (on screen readers or if it fails to load)?
- alt="decription of the image"
CSS 박스 모델이란?
- 특정 문서의 레이아웃을 렌더링할 때 브라우저의 렌더링 엔진은 각 요소를 직사각형 박스로 표현
- 모든 박스는 content edge, padding edge, border edge, margin edge로 구분되는 4개의 영역(콘텐츠 영역, 패딩 영역, 보더 영역, 마진 영역)으로 구성
- 각 영역은 width와 height으로 정의
selector, property, value란?
- selectors are used to select the HTML elements that we want to style
- 프로퍼티(property) : HTML 요소 디자인을 위해 조정할 수 있는 특성들
- value : 프로퍼티의 지정 값(ex color-red에서 red)
URL에서 쿼리 스트링이란 무엇이고 어떤 역할을 하는가?
- 사용자가 입력한 데이터를 서버로 전달하는 가장 단순한 방법으로 url주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것
https://velog.io/@sunnysideup?param1=value1¶m2=value2에서- '?' 뒷부분이 쿼리 스트링에 해당
- '='를 중심으로 앞부분은 파라미터, 뒷부분은 값에 해당!
- 쿼리 스트링이 2개 이상일 경우 '&'로 쿼리 스트링 연결
역할
- 웹 프로그램에서는 페이지 이동 시 이전 페이지의 값들은 모두 잃으므로 현재 페이지의 정보를 바로 다음 페이지에서 전혀 알 수 없음
- 하지만 프로그램 만들다 보면 페이지 사이에 정보 교환이 필요한 경우가 있는데 이를 위해서 쿼리 스트링을 제공
- 즉, 다른 페이지로 이동해도 파라미터 값이 유지됨
픽셀과 ems의 차이는?
- 둘 다 상대적인 단위로 기종간, 플랫폼 간 호환성 유지에 유리
- 픽셀은 표시장치(모니터)에 따라서 상대적인 크기를 가짐
- em(element measure)은 해당 폰트의 크기에 비례
특정 요소에 대한 CSS 스타일은 어떻게 상속되는가?
- 상속은 특정 요소의 프로퍼티의 값이 지정되지 않았을 때 발생하며 부모 요소의 프로퍼티 값을 상속받음
- 루트 요소의 경우만 초기값을 사용
What are two CSS attributes you can change to push an element around on the page?
- margin(바깥 여백), padding(안쪽 여백)
What are the three different ways to include CSS in your project or use CSS to style a particular element?
- inline
<p style="color: red">show color</p> - internal
<style>
p {
color: red;
}
</style>
...
<p>show color</p>- external
/* style.css */
p {
color: red;
}<!DOCTYPE html>
...
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
...
<body>
<p>show color</p>
</body>What is the difference between CSS Grid and Flexbox?
in grids the space for each cell is fixed while you are free to manipulate space in flexbox?- flexbox was designed for layout in one dimesion: either row or column
- grid was designed for two-dimensional layout: rows and columns at the same time
- in terms of space, flexbox provided more flexibilty
- for more info check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
use FLEXBOX when:
- you need to control the layout by row or column
- you want to work based on the size of content(item)
use GRID when:
- you need to control the layout by row and column
- you want to work based on the layout(strict grid)
CSS에서 브레이크 포인트란?
- 반응형 디자인을 위해서 미디어 쿼리를 이용해 콘텐츠가 브라우저 크기에 맞게 레이아웃을 조정하도록 할 때, 변화가 적용되도록 하는 지점
반응형 디자인을 위해서는 모바일 우선 기준? 데스크탑 우선 기준?
- 보통은 큰 화면을 기준으로 설정하고 작은 화면으로 줄여나가며 조절해간다고 함!
What are the two main groups of CSS properties that control typography style?
- font: 폰트 스타일 강조 여부 등을 지정
- text: 인덴트, 여백, 문단 등을 다룸
디폴트 스타일시트 혹은 유저-에이전트 스타일시트란?
- 브라우저가 모든 문서에 디폴트로 적용하는 기본 스타일 시트
CSS 초기화 파일을 쓰는 이유는?
- 브라우저마다 디폴트 CSS 설정이 있기 때문에 이를 초기화 시켜주기 위한 것!
CSS에서 !important 규칙은?
- css에서는 특정 요소의 프로퍼티를 여러번 정의하는 경우 가장 하위에 설정한 값(가장 마지막에 설정한 값)이 적용되는데, 특정 속성값 앞에
color: red !important;와 같이 덧붙이면 해당 프로퍼티 값이 오버라이딩되지 않고 유지됨
####references
☀️