1. ul 과 ol 의 차이는 무엇이 있나?
-> ul 은 순서가 없는 목록이며 주로 블릿으로 처리된다.
-> ol 은 순서가 있는 목록이며 주로 숫자 기호로 처리된다.
ul ol 모두 목록을 나타내지만 ul은 순서가 중요하지 않다는 것이 차이점이다.
2. dl , dt , dd 에 대해서 설명하라.
-> 순서 있는 목록을 만들 때는 ol 에 li 를 주로 사용한다. ol 은 ordered list 의 줄임말.
start 속성을 사용해서 시작 순서를 바꿀 수 있고 type 속성을 이용해서 영문자나 로마 숫자로 순서를 나타낼 수 있음.
<ol type="a" start="3"> => 3번째 소문자 알파벳부터 시작한다는뜻.
type = i ( 로마 숫자 소문자 )
type = I ( 로마 숫자 대문자 )
반면 ul li 는 순서 없는 목록을 만드는 태그.
( ul li 는 블릿이 있음 )
dl dt dd, 데스크립션이 약자이다. ( 서술 )
반드시 dl 태그 안에는 dt,dd태그만 위치할 수 있다.
<dl>
<dt></dt>
<dd></dd>
</dl>
dl -> 정의 목록을 나타내는 태그. ( block ) 이런 개념은 되었고
dl , dt , dd 는 어떨 때 주로 사용하는 놈들일까?
* 정확한 예시가 있는 것 같아서 찾아봤다.
대상을 정의 ( 설명 )
ul 순서 없는 목록
ol 순서 있는 목록
dl - dt dd - 대상을 정의 설명 서술
3. strong, em, b 의 차이를 서술하라.
strong 과 em 은 의미론적으로 " 강조하고 싶을 때 " 사용하는 것으로
strong은 글자가 " 굵게 " 표현이 되고 ( 스트롱! )
em은 " 이탤릭체 " 로 표현이 된다.
그러나 단순히 강조가 아닌 " 글자만 이탤릭체 " 로 표현을 하고 싶을 때는 i태그를 사용한다.
이와 비슷하게 b태그는 아무 의미 없이 " 글자만 굵게 " 표현하고 싶을 때 사용한다.
4. figure 태그를 설명해보아라.
figure 태그는 사진, 도표, 삽화, 오디오, 비디오, 코드등을 담는 컨테이너 역할을 하는 태그이다.
figcaption 요소는 이에 대한 설명하는 문구를 담는 태그이다.
figcaption 요소는 선택적이며 figure 요소 안에 사용한다.
figcaption 요소는 figure 요소에서 한번만 사용할 수 있으며,
figure 안에는 여러가지의 자식요소를 포함할 수 있다 ( img )
5. css 전처리기에 대해서 설명해보아라.
css 전처리기는 css의 한계를 뛰어넘기 위해 개발된 새로운 형태의 css 라고 할 수 있다.
1. css를 보다 쉽게 작성할 수 있게
2. 다른 개발자들이 내가 작성한 css를 보다 쉽게 이해할 수 있게
3. css로는 구현이 불가능한 변수 또는 함수를 사용할 수 있게
css 전치리기 " 프레임 워크 " 의 종류
1. Sass ( 싸스 )
2. Less ( 레쓰 )
3. Stylus ( 스타일러스 )
전처리기를 왜 쓰는가 -> 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을
보다 쉽게 관리할 수 있기 때문에 씀. 너무 큰 css 파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문에.
( 개발적 측면에서 유지보수의 용이성을 위해 )
장단점엔 뭐가 있지?
장점 -> css 코드를 여러 파일로 나눠 유지보수성이 향상됨.
단점 -> 전처리기를 위한 도구가 필요. ( 컴파일하는 시간이 느릴 수 있음 )
컴파일?
컴파일 -> 사람이 이해할 수 있는 소소 프로그램 ( ex C언어 ) 컴퓨터가 이해할 수 있는 기계어 ( ex 0,1,0,1 )
로 변환해주는 과정을 " 컴파일 " 이라고 한다. Compile 번역하고 고치는 과정.
Less 에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와
혼동될 여지가 있음.
Sass 에서는 노드 버전을 바꿀 때 자주 다시 컴파일 해야함.
노드? 노드는 또 뭐지?
-> Node.js 일단 이 친구는 " 프레임워크 " 이다.
자바스크립트로 서버단 기술까지 제어할 수 있게해줌. 2009년에 나왔고, 이벤트 처리 I/O 프레임 워크다.
서버 환경에서 자바스크립트로 애플리케이션을 작성할 수 있도록 도와준다.
노드의 장점은 비동기 프로그래밍이다. 여기서 동기와 비동기의 개념이 나온다. 다시 상기하자.
동기 프로그래밍이란 무엇인가를 요청하면 결과를 그 즉시 받는 것을 의미한다.
비동기는 이벤트를 요청하고 바로 결과를 받지 않아도 된다. 그래서 결과값을 기다리지 않고
보다 다양한 요청을 처리할 수 있다. 웹 분야에서는 비동기 프로그래밍을 쓰는 경우가 드물었는데
노드 JS로 비동기 프로그래밍을 비교적 쉽게 할 수 있게 되었다.
( 검은사막 노드 무역 일꾼 )
노드는 이제 프론트와 백엔드를 자바스크립트라는 같은 언어로 다같이 관리할 수 있는 것이 큰 장점이라 할 수 있다.
덕분에 웹 개발자들은 새로운 언어를 배우지 않고 기존 언어를 활용해 서버 기술을 빨리 응용할 수 있게 되었다.
그러한 확장성도 노드 JS 의 장점이다. 언어는 자바스크립트이고, 일종의 프레임워크이다.
기능은 이제 서버단 기술까지 제어할 수 있게 해주는 친구.
다시 본론으로 돌아와서,
sass를 이용하면 css 구문을 입력할 때 변수, 조건문, 반복문, 함수의 다양한 편의 기능을 사용할 수 있다.
stylus -> 상대적으로 프로그래밍 언어의 특징을 많이 포함하고 있습니다.
Sass -> 가장 많이 써요. 오래되었고 개발 활발히. 라이브러리 이용할거리 많음. 내장 기능 많음. 디펜던시 ruby 요구.
Less -> 그 다음으로 많이 쓰고 많음. 디펜던시로부터 자유로움.
6. MDN 사이트는?
-> HTML,CSS, Javascript 기술과 웹 기반 소프트웨어를 배울 수 있는 플랫폼. 오픈 무료 라이센스.
7. Button 태그의 default type은?
->