[코딩 자율학습 HTML + CSS + 자바스크립트] Part1 HTML로 웹 구조 설계하기/ 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
·
💻/FE
1. 텍스트 작성하기hn 태그/ p 태그/ br 태그/ blockquote 태그/ q 태그/ ins 태그, del 태그/ sub, sup 태그hn 태그제목이나 주제를 나타내는 텍스트 표현할 때 사용제목h1 ~ h6 태그(6개)h: heading/ n: (숫자) 중요도검색 엔진에서 키워드로 인식=> 검색 엔진 최적화(SEO; Search Engine Optimization) 위해 본문에서 핵심이 되는 내용SEO: 검색 엔진에서 상위에 랭크(rank)될 수 있도록 검색 엔진에 친화적으로마크업(markup, 문서 구조)을 작성하는 것p 태그본문의 문단(paragraph)을 작성할 때 사용내용br 태그문단에서 줄 바꿈할 때 사용blockquote 태그출처에서 인용한 문단 단위의 텍스트 작성할 때 사용출처가 확실..
[코딩 자율학습 HTML + CSS + 자바스크립트] Part1 HTML로 웹 구조 설계하기/ 2장 HTML 문서 작성을 위한 기본 내용 살펴보기
·
💻/FE
1 HTML의 기본 구성 요소태그/ 속성/ 문법/ 주석태그구성 요소를 정의하는 역할HTML 문법을 이루는 가장 작은 단위혼화살표괄호() 사이에 태그명을 넣는 형태속성태그에 어떤 의미나 기능을 보충하는 역할~= 옵션 => 사용해도 되고 안 해도 되고, 여러 개 사용해도 됨But, 태그 없이 단독 사용X속성명 + 속성값으로 구성ex. -> 태그: html/ 속성명: lang/ 속성값: ko=> 주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작속성명: 따옴표 X 작성/ 값: 큰따옴표("") 안에 작성속성값 여러 개 -> 쉼표(,)로 구분해 값을 나열문법콘텐츠(content)가 있는 문법콘텐츠 앞뒤를 태그로 감쌈시작 태그(open tag): 앞에 넣는 태그종료 태그(close tag): 뒤에 넣는 ..
[모든 개발자를 위한 HTTP 웹 기본 지식] 섹션 7. HTTP 헤더1 - 일반 헤더
·
💻/HTTP
// HTTP 요청 메시지 == 전송 데이터start-line 시작 라인: GET/search?q=hello&hl=ko HTTP/1.1header 헤더: HOST: www.google.comempty line 공백 라인:-> 요청 메시지도 body 본문을 가질 수 있음// HTTP 응답 메시지start-line 시작 라인: HTTP/1.1 200 OKheader 헤더: Content-Type: text/html;charset=UTF-8empty line 공백 라인: Content-Length: 3423message body ...HTTP 헤더header-field = field-name “:” OWS field-value OWS (OWS: 띄어쓰기 허용)field-name: ..
[모든 개발자를 위한 HTTP 웹 기본 지식] 섹션 6. HTTP 상태코드
·
💻/HTTP
HTTP 상태코드클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능1xx (Informational): 요청 수신되어 처리중2xx (Successful): 요청 정상 처리3xx (Redirection): 요청 완료하려면 추가 행동 필요4xx (Client Error): 클라이언트 오류, 잘못된 문법 등으로 서버 요청 수행 X5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리 X 만약 모르는 상태 코드 나타나면?Q: 클라이언트가 인식 X 상태코드를 서버가 반환하면? A: 클라이언트는 상위 코드로 해석해서 처리⇒ 미래에 새로운 상태 코드가 추가되어도 클라이언트를 변경하지 않아도 됨ex.299 ??? → 2xx (Successful)451 ??? → 4xx (Client Erro..
[모든 개발자를 위한 HTTP 웹 기본 지식] 섹션 5. HTTP 메서드 활용
·
💻/HTTP
클라이언트 → 서버로 데이터 전송HTTP API 설계 예시클라이언트 → 서버 데이터 전달 방식쿼리 파라미터 ~> 데이터 전송GET주로 정렬 필터(검색어)메시지 바디 ~> 데이터 전송POST, PUT, PATCH회원 가입, 상품 주문, 리소스 등록, 리소스 변경4가지 상황정적 데이터 조회이미지, 정적 텍스트 문서동적 데이터 조회주로 검색, 게시판 목록에서 정렬 필터(검색어)HTML Form을 통한 데이터 전송회원 가입, 상품 주문, 데이터 변경HTTP API를 통한 데이터 전송회원 가입, 상품 주문, 데이터 변경서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)정적 데이터 조회이미지, 정적 텍스트 문서조회는 GET 사용일반적으로 쿼리 파라미터 X 리소스 경로로 단순하게 조회 가능동적 데이터 조회검색..
[모든 개발자를 위한 HTTP 웹 기본 지식] 섹션 4. HTTP 메서드
·
💻/HTTP
요구사항: 회원 정보 관리 APIURI(Uniform Resource Identifier)회원 목록 조회 read-member-list회원 조회 read-member-by-id회원 등록 create-member회원 수정 update-member회원 삭제 delete-member→ 좋은 URI 설계? ⇒ 가장 중요한 것: 리소스 식별리소스의 의미?회원을 등록하고 수정하고 조회하는 것이 리소스 Xex. 미네랄을 캐라 → 리소스: 미네랄⇒ 회원이라는 개념 자체가 바로 리소스리소스 어떻게 식별?회원을 등록하고 수정하고 조회하는 것을 모두 배제회원이라는 리소스만 식별하면 됨 ⇒ 회원 리소스를 URI에 매핑 리소스 식별, URI 계층 구조 활용회원 목록 조회 /members회원 조회 /members/{id}회원 등..
kimmeoww
빙글빙글 돌아가는 Debug 하루