고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 토요일이라 학원에 가지 않고 개인적으로 할 일들을 하며
자습을 하는 시간을 가졌습니다
HTML 공부
<<HTML>>
웹페이지의 명사 같은 것
콘텐츠의 구조를 규정 = 페이지에 무엇이 있는지 나타내는 것
스타일(CSS)이나 행동(JavaScript)은 아니다
소위 마크업 언어이다. Hypertext Markup Language
완전한 프로그래밍 언어가 아니다
복잡한 논리 같은 것도 전혀 필요하지 않고
문서에 마크업을 할 뿐
웹 문서를 마크업하면 실제로 웹 페이지에 반영되어 나타난다
여러 방식으로 텍스트의 문단을 만들고 이미지를 만들고 링크를 만드는 등 가능하다
닫는 태그가 없으면 글의 끝까지 태그가 적용된다
모든 브라우저는<>태그를 알아본다 = 표준
<<HTML 요소>>
<<단락 요소>>
* P 태그 = <p>
단락처럼 묶고 싶은 내용이라면 어떤 것이든 <p> 태그로 묶을 수 있다
이미지, input태그, label태그 등등 다양한 형태가 가능
VScode에서 몇줄을 띄워줘도 웹페이지에서는 단락이 나눠지지 않음
이럴 때 <p> 태그 사용
단락 안에 태그가 있어도 상관없다
블록 레벨 요소 = 한 블록의 공간을 차지한다는 뜻
단락이 한 블록을 차지하면서 다음 단락은 다음 줄부터 나오도록 강제하는 것
p를 쓰고 탭을 누르면 자동으로 태그 입력 가능
<<제목 요소>>
<h> 태그
<h1> = 페이지의 최상위 제목을 의미
한 페이지 당 하나만 있어야 한다
항상 최상위 제목이 되어야 한다 = 한 페이지에 최상위 주제가 두 가지일 수 없기 때문에
최상단에 딱 하나만 있어야 한다
단락처럼 아래 한 줄 공간을 차지하게 된다 (독립적인 머리말처럼 된다)
<h2> = 하위 섹션의 제목
<h3> = 그 아래의 제목
<h4> = <h3>의 하위 섹션
=> CSS를 활용하면 글자 크기를 조정할 수 있다
=> <h1>과 <h2> 없이는 <h3>은 존재할 수 없다
<<Chrome 인스펙터>>
Chrome 개발자 도구
어느 페이지에서든 마우스 우클릭 후 Inspect 클릭 = 페이지의 숨은 HTML => 모든 요소가 다 있음
= 개발자 도구의 일부
<<HTML의 골자>>
= 상용구 라고도 한다
= 모든 HTML 문서에 들어가야 하는 표준화된 마크업
첫번째 = <!DOCTYPE html>요소 = HTML의 최신 규격을 쓴다는 의미
특이하게도 닫기 태그가 없고 그냥 표식으로 작용한다
(이후에 들어가는 요소들은 여는 태그와 닫는 태그가 존재한다)
다음 단계 = HTML 요소를 추가해 주어야 한다 = 루트 요소 => 문서의 최상위 요소를 뜻한다
페이지의 다른 모든 요소는 이 루트 요소를 근간으로 한다
<head>,<body>요소 = 하나의 <body>요소를 지닌 하나의 <head>요소
항상 한 쌍을 이루고 있는 것
<head>요소 = 메타데이터 요소 = 페이지 상에 보이지 않는 내용을 담고 있다
웹 페이지와 스크립트에 관한 모든 메타데이터 정보
들여쓰기 할 필요는 없다
=> CSS에서 스타일 속성을 입력할 공간
<타이틀 요소> = 타이틀 요소 => 브라우저 탭 상에 표시되는 정보를 바꾸는 기능
Google의 경우 타이틀 요소로 검색을 한다
=> <head>의 타이틀 요소를 이용하여 검색 결과 창에 링크를 생성
페이지마다 있어야 하는 아주 중요한 요소
페이지가 아닌 브라우저에 뜨는 정보
<body>요소 = 문서의 모든 내용을 담고 있는 요소
단 하나만 있을 수 있다 = 지금까지 작성한 내용을 담을 공간
<h1> 이나 단락을 비롯한 모든 것을 담는다
= 페이지의 모든 콘텐츠가 들어 있다
텍스트, 사이드바를 비롯한 모든 정보
=> 여기까지가 모든 페이지에 만들어야 하는 요소이다
=> !느낌표를 입력하고 Tab탭을 누르면 <DOCTYPE>부터 <body>가지 자동으로 생성된다
= 그만큼 자주 쓰이는 상용구
* VScode팁
자동포맷 - 들여쓰기로 깔끔해 보이게 하는 가독성을 좋게 만드는 방법
= ctrl + shift + p
<<목록 요소>>
* 숫자로 된 목록
<ol>태그 = 숫자로 표시되는 목록
* 순서 없이 점으로 된 목록
<ul>태그 = 점으로 표시되는 목록
하위 요소는 <li>로만 구성된다
(<script>태그, <tempate>태그도 허용 가능 그외 <li>태그만 자식 목록에 허용됨)
공통점 => 두 태그 모두 중첩 요소로 이루어져 있다
<li> 태그 = 목록 아이템 => 부모 목록이 있고 거기 실제로 들어 있는 하위 요소
목록 내의 단일 아이템을 표시하는 태그
=> <ol>, <ul> 양쪽 모두에 쓰이지만 그 둘 중 하나의 안에 위치해야 한다
그래야 순서가 있는 또는 순서가 ㅇ벗는 목록을 만들 수 있다
=> 태그의 안에도 다른 요소를 중첩 시킬 수 있다
= 뭐든 넣고 싶은 걸 넣어도 된다 (목록 안의 목록 추가도 가능 = 중첩 목록)
<<앵커 요소>>
<a>태그 = 다른 웹페이지나 이메일 주소, 파일, 현재 페이지의 다른 위치로 연결 가능
여는 태그와 닫는 태그 -> a사용 -> 그 사이에 콘텐츠를 넣는다
=> 속성이라는 것을 사용해야 한다
= HTML의 속성이란 - 태그에 부여할 수 있는 작은 정보를 의미
- 여는 태그와 닫는 태그 사이가 아닌 태그 중 하나의 안에 들어간다
=> 앵커 태그로 만드는 모든 하이퍼링크에는 href라는 속성이 들어간다 (hypertext reference)
-> href = ""의 형식
-> <a href = "http://www.google.com"> </a>
<<이미지 요소>>
= HTML 문서에 이미지를 삽입할 수 있게 해줌
열고 닫는 태그가 없는 인스턴스이다
=> img 라는 태그만 있고 사이에 아무 콘텐츠가 없는 것
닫기 태그도 없고 그냥 이미지이다
= 이미지가 있는 URL만 제공하면 되기때문
= 이 속성은 source 즉 src이다 => href와 똑같은 패턴
-> <img src = "폴더경로/파일명.확장자"> 의 형식 => 확장자 며을 정확히 적어주어야 한다
<img src = "이미지 주소">
=> alt라는 특수 속성 사용 가능 = 이미지의 설명을 넣을 수 있다
-> alt = 설명 의 형식
-> <img src ="이미지 파일" alt = "설명">
<<HTML 주석>>
주석은 요소가 아니다
브라우저에서 보이지 않는다
브라우저에는 보이지 않는 텍스트를 HTML 문서에 넣는 것
=> 보통 메모나 피드백이나 리마인더 용도로 쓴다
-> <!-- 주석내용 --> 의 형식으로 사용
> 내용이 기울어지고 회색으로 변한다
Coding Test Practice
Description
문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요.
function solution(my_string) {
var answer = '';
for(var i = 0; i < my_string.length; i++){
if( !answer.includes(my_string[i])){
answer += my_string[i]
}
}
return answer;
}
Description
두 정수 a, d와 길이가 n인 boolean 배열 included가 주어집니다. 첫째항이 a, 공차가 d인 등차수열에서 included[i]가 i + 1항을 의미할 때, 이 등차수열의 1항부터 n항까지 included가 true인 항들만 더한 값을 return 하는 solution 함수를 작성해 주세요.
function solution(a, d, included) {
var answer = 0;
// 첫째항이 a, 공차 d
// included[i] = i+1항 의미 의 길이 = n
var n = included.length;
var Numbers = 0;
for(var i = 0; i < n; i++){
Numbers = a + (i*d);
if(included[i] == true){
answer += Numbers;
}
}
return answer;
}
// a = 2, d = 3
// 1항 = 2
// 2항 = 5
// 3항 = 8
// 4항 = 11
// 5항 = 14
// (n-1)d + a헷갈릴때에는 이것처럼 직접 값을 넣어서 어떻게 결과가 나올지 예상해보는 방법이 유용한것 같습니다
Description
문자열 my_string과 두 정수 m, c가 주어집니다. my_string을 한 줄에 m 글자씩 가로로 적었을 때 왼쪽부터 세로로 c번째 열에 적힌 글자들을 문자열로 return 하는 solution 함수를 작성해 주세요.
function solution(my_string, m, c) {
// my_string을 한줄에 m글자씩 가로로 적었을 때
// 왼쪽부터 세로로 c번째 열에 적힌 글자들
// 0 ~ m-1, m ~ m + m-1, m+m ~ m + m + m -1
const result = [];
for (var i = 0; i < my_string.length; i += m) {
result.push(my_string.slice(i, i + m));
}
var answer = '';
for(var i = 0; i < result.length; i++){
answer += result[i][c-1]
}
return answer;
}
Description
2차원 정수 배열 board와 정수 k가 주어집니다.
i + j <= k를 만족하는 모든 (i, j)에 대한 board[i][j]의 합을 return 하는 solution 함수를 완성해 주세요.
function solution(board, k) {
var answer = 0;
var sum_list = '';
for(var i = 0; i < board.length; i++){
for(var j = 0; j < board[i].length; j++){
if(i + j <= k){
answer += board[i][j]
}
}
}
return answer;
}문제를 해석하는 데에 시간이 많이 걸렸던 문제였지만
그에 비해 답은 이중 포문을 사용하여 이중 배열을 순회해서
조건에 맞는 요소만 answer에 추가해주면 됐었던 문제였습니다
Description
정수 배열 date1과 date2가 주어집니다. 두 배열은 각각 날짜를 나타내며 [year, month, day] 꼴로 주어집니다. 각 배열에서 year는 연도를, month는 월을, day는 날짜를 나타냅니다.
만약 date1이 date2보다 앞서는 날짜라면 1을, 아니면 0을 return 하는 solution 함수를 완성해 주세요.
function solution(date1, date2) {
// date1 = [year, month, day]
// date2 = [year, month, day]
// year비교 -> month비교 -> day비교
if(date1[0] < date2[0]){
return 1;
}
if(date1[0] == date2[0]){
if(date1[1] < date2[1]){
return 1;
}
if(date1[1] == date2[1]){
if(date1[2] < date2[2]){
return 1;
}else{
return 0;
}
}
if(date1[1] > date2[1]){
return 0;
}
}
if(date1[0] > date2[0]){
return 0;
}
}생각보다 금방 풀어버렸는데
코드가 너무 지저분해 보입니다...
function solution(date1, date2) {
// date1 = [year, month, day]
// date2 = [year, month, day]
// year비교 -> month비교 -> day비교
if(date1[0] < date2[0]){
return 1;
}else if(date1[0] == date2[0]){
if(date1[1] < date2[1]){
return 1;
}else if(date1[1] == date2[1]){
if(date1[2] < date2[2]){
return 1;
}
return 0;
}
조금이나마 깔끔하게 바꿔줘보았습니다
2023. 10. 07 (토)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 41일차 (0) | 2023.10.11 |
|---|---|
| 프로그래머 도전기 40일차 (0) | 2023.10.09 |
| 프로그래머 도전기 38일차 (2) | 2023.10.06 |
| 프로그래머 도전기 37일차 (0) | 2023.10.05 |
| 프로그래머 도전기 36일차 (1) | 2023.10.04 |
