고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 공휴일인 한글날입니다
프로그래밍 언어를 배우고 있는데
영어가 아닌 한글이었다면 배우기가 좀 더 수월했을까
하는 생각이 문득 들었습니다
HTML 공부
html
<<HTML5>>
= 현재 HTML을 정의하는 가장 발전된 표준
= 새로운 요소, 속성, 행동을 가진 새로운 버전의 HTML언어
= 더 많은 일련의 기술을 말한다
=> 새로운 형태의 HTML을 말한다
브라우저를 위한 여러 내용물을 가리키기도 한다
= CSS용 새로운 것들, 3D 그래픽 관련 새로운 것들
성능 업그레이드와 강화가 모두 포함
=> 하지만 보통은 HTML을 정의하는 가장 발전된 표준을 말한다
HTML 작동방식 = 다운로드할 공식 파일X = 설치할 필요X
=> HTML5는 다운로드하거나 설치하는 새로운 버전이 아니라
브라우저가 구현하는 사양의 표준이라는 개념
<<div, span요소>>
인라인, 블록 요소 = 주어진 요소가 문서의 콘텐츠 흐름에 들어가게 하는 방법을 의미
블록 요소 = 전체 블록을 차지
인라인 요소 = 콘텐츠가 있는 영역만 차지(공간을 같이 사용)
span, div = 일종의 제네릭 컨테이너
div = 무언가를 잡아두는, 요소를 그룹화하는 => 제네릭 컨테이너, 블록 수준 요소
어떤 콘텐츠에 div를 넣으면 -> div는 전체 블록을 차지 -> 위아래의 컨텐츠를 밀어낸다
=> CSS에서 div로 컨텐츠를 그룹화하면 스타일을 정해줄 수 있다
= CSS가 div에 경계선을 넣게 할 수 있다
span = div와 비슷하지만 인라인이라서 전체 블록을 차지하지 않는다 => 제네릭 컨테이너, 인라인
텍스트나 콘텐츠를 span으로 감싸면 -> 하나의 그룹으로 묶어서
=> CSS로 스타일을 정하거나 할 수 있다
<<기타 요소 모음>>
<hr>태그 = horizontal rule
닫는 태그가 없다 = 내용이나 속성을 부여할 필요가 없다
= 스크린을 수평으로 가로지르는 선을 하나 만드는 기능
=> 굵기, 크기 등 모양도 마음대로 꾸밀 수 있다
<br>줄바꿈 태그 = 그냥 줄을 바꾸는 태그, 내용의 줄을 바꿔주는 기능
<윗첨자, 아랫첨자>
<sup>태그 = 윗첨자 - 윗첨자 텍스트를 표현할 때 사용
- 기준선보다 더 위에 떠 있는 텍스트(ex. 지수, 제곱, 인용에 사용되는 링크 등)
<sub>태그 = 아랫첨자 - 아랫첨자 텍스트를 표현할 때 사용
- 기준선보다 더 아래에 내려가 있는 텍스트(ex. 화학식, 분수 등)
<<HTML 엔티티(Entity)>>
HTML 엔티티, 엔티티 코드 = HTML대신 쓸 수 있는 특별한 코드 또는 시퀀스
= 엔티티를 사용하면 다른 글자가 표시된다
키보드로 타이핑하기 어려운 글자 기호 등을 입력할 수 있다
=> 모든 엔티티 코드는 &로 시작해서 ;로 끝난다
그리고 그 사이에 글자를 입력하면 된다
ex. 부등호 같은 경우 오류를 일으킬 수 있기 때문에 엔티티 부등호 코드를 찾아서 입력해주면 된다
= 타이핑하기 어렵거나 브라우저가 인식하기 힘들 글자를 표시할 수 있게 해주는 특별한 코드일 뿐
<<시멘틱 마크업>>
시맨틱 = '의미와 관련된' 이라는 뜻
머리말, 꼬리말, nav section, aricle, main => 모두 div와 같은 기능이지만 각자 의미가 있다
= 마크업에 의미를 부여하는 것은 중요하다
=> 요소의 이름만으로 무슨 기능인지 알 수 있기 때문
시맨틱 마크업을 하는 이유
첫번째 = 크롤러가 더 쉽게 코드를 알아보도록, 다른 어플리케이션, 코드와 더 잘 융합되도락 하기 위해서
두번째 = 접근성 => 스크린 리더를 쓰는 사람들이 코드에 더 쉽게 접근할 수 있도록 하기 위해서
시맨틱 마크업 요소들을 표지판삼기 때문
스크린 리더를 사용 -> 꼬리말, 머리말을 찾아 달라고 하거나
직접 네비게이션을 찾아서 빠르게 이동 가능
=> 이때 시맨틱 요소들이 사용되면 그 과정이 훨씬 쉬워진다
세번째 = 스스로 만든 코드나 마크업을 스스로가 더 쉽게 읽어낼 수 있기 때문
-> 다른 개발자들한테도 마찬가지
=> 마크업에 의미를 부여하기 위해서 시맨틱 마크업을 하는 것
<main>요소
문서의 주요 내용을 나타낸다
원칙 => 페이지의 주요 내용을 의미
페이지 전반에서 계속 반복되는 내용은 전부 제외
= 사이드바, nav 링크 저작권 정보, 로고 검색 형식 등 => 메인 콘텐츠에 포함X
<nav>요소
페이지에서 내비게이션 링크를 제공하는 것들을 나타낸다
페이지의 다른 부분을 가리키는 링크일 수도 있다
=> 링크를 포함하는 원하는 내용으로 채우면 된다
<section>요소
웹 사이트나 애플리케이션의 독립적인 부분을 나타낼 뿐 딱히 다른 기능은 없다
div = 그냥 제네릭 컨테이너 => 아무 곳에서나 다 쓸 수 있다
section = 내용의 한 부분 웹 사이트의 독립적인 부분이어여 한다
하나의 그룹으로 묶고 싶다면 -> div를 써도 되지만 section이 더 낫다
<article>요소
문서 내의 독립적인 구성을 나타냄
여러개의 서브 article이 있는 것도 가능 = 한 페이지에 하나 이상의 article이 있을 수도 있다
= 독립적으로 나뉠 수 있거나 다시 사용될 수 있는 것이면 됨
내용을 그룹으로 묶을 때 쓰는 또 다른 요소이다
<aside>요소
엄밀히 말하자면 문서의 일부는 아니다 => 일부가 될 수도 있지만 필요조건은 아니다
간접적으로 연결되어 있어 부수적이다
=> 그래서 사이드바나 말풍선 등으로 표현된다
<header, footer>요소
header = 머리말 요소 = 보통 내용을 소개
footer = 꼬리말 요소 = 진짜 꼬리말은 맨 아래에 위치한다
<time>요소
인라인 요소
시간이나 날짜를 의미하는 내용의 양옆에 입력
=> <datetime>속성을 명시해야 한다 (datetime = 시맨틱 요소이다)
<figure>요소
보통 독립적인 내용을 나타냄
캡션이 달린 경우도 있다
일러스트나 다이어그램처럼 사람들의 시선을 끌고 캡션이 함게 달린 걸 의미
Coding Test Practice
Description
문자열 배열 intStrs와 정수 k, s, l가 주어집니다. intStrs의 원소는 숫자로 이루어져 있습니다. 배열 intStrs의 각 원소마다 s번 인덱스에서 시작하는 길이 l짜리 부분 문자열을 잘라내 정수로 변환합니다.
이때 변환한 정수값이 k보다 큰 값들을 담은 배열을 return 하는 solution 함수를 완성해 주세요.
function solution(intStrs, k, s, l) {
var reform = [];
var answer = [];
for(var i = 0; i < intStrs.length; i++){
reform.push(intStrs[i].substr(s, l))
}
for(var i = 0; i < reform.length; i++){
if(reform[i] > k){
answer.push(reform[i]);
}
}
return answer.map(Number);
}map() = 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환
여기서는 Number 함수를 사용하여 각 요소를 숫자로 변환하고, 이 변환된 숫자들로 이루어진 새로운 배열을 반환
Description
아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 길이가 같은 정수 배열 arr과 boolean 배열 flag가 매개변수로 주어질 때, flag를 차례대로 순회하며 flag[i]가 true라면 X의 뒤에 arr[i]를 arr[i] × 2 번 추가하고, flag[i]가 false라면 X에서 마지막 arr[i]개의 원소를 제거한 뒤 X를 return 하는 solution 함수를 작성해 주세요.
function solution(arr, flag) {
var answer = [];
for (var i = 0; i < arr.length; i++) {
if (flag[i] === true) {
for (var j = 1; j <= arr[i] * 2; j++) {
answer.push(arr[i]);
}
}
if (flag[i] === false) {
for (var j = 1; j <= arr[i]; j++) {
answer.pop();
}
}
}
return answer;
}
Description
정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요.
num_list가 [1, 2, 3, 4, 5, 6, 7, 8] 로 길이가 8이고 n이 2이므로 num_list를 2 * 4 배열로 다음과 같이 변경합니다. 2차원으로 바꿀 때에는 num_list의 원소들을 앞에서부터 n개씩 나눠 2차원 배열로 변경합니다.
function solution(num_list, n) {
var answer = [];
for (var i = 0; i < num_list.length; i += n) {
answer.push(num_list.slice(i, i + n));
}
return answer;
}
Description
i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를들어 5! = 5 * 4 * 3 * 2 * 1 = 120 입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해주세요.
i! ≤ n
function solution(n) {
var answer = 1;
var num = 1;
for(var i = 1; i <= 11; i ++){
answer *= i;
if(answer > n){
return i - 1;
}
}
}
Description
문자열 before와 after가 매개변수로 주어질 때, before의 순서를 바꾸어 after를 만들 수 있으면 1을, 만들 수 없으면 0을 return 하도록 solution 함수를 완성해보세요.
function solution(before, after) {
before = before.split("").sort().join("")
after = after.split("").sort().join("")
return before === after ? 1 : 0;
}split() = 문자열을 부분 문자열(substring)로 구분해 문자열 객체를 여러 개의 문자열로 이루어진 배열로 분할
sort() = 배열의 요소를 정렬
join() = 배열의 모든 요소를 문자열로 결합
2023. 10. 09 (월)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 42일차 (4) | 2023.10.12 |
|---|---|
| 프로그래머 도전기 41일차 (0) | 2023.10.11 |
| 프로그래머 도전기 39일차 (1) | 2023.10.07 |
| 프로그래머 도전기 38일차 (2) | 2023.10.06 |
| 프로그래머 도전기 37일차 (0) | 2023.10.05 |
