본문 바로가기

○ WEB/19.03 FastCampus_HTML16

[드림코딩] HTML Emmet 문법 작성하기 div태그안에 ul태그 안에 li태그가 있는데 ol태그는 ul태그의 형제다.div>ul>li^ol div>header>(ul>(li>a)*2)^footer>pdiv>(header>ul>(li>a)*2)+footer>p p태그의 컨텐츠는 hellop{hello}hellop태그의 클래스 네임은 'class숫자' 이며 클래스네임은 'item숫자'. 1~5까지 총 5개를 만들어보자p.class${item$}*5 item1 item2 item3 item4 item5p태그에 더미용 텍스트를 넣자p>loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, eius, quos. Cumque dolorem veritatis non ipsa quasi d.. 2021. 3. 1.

[드림코딩] HTML 시작하기 기본 참고서 : developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN 와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 developer.mozilla.org ko.wikipedia.org/wiki/HTML HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 최신 HTML 버전인 HTML5의 로고이다. 하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 ko.. 2021. 3. 1.

[Boost UI] HTML 태그 / 텍스트 / 내외부링크 / div,span / 리스트 / 이미지 현재 태그의 개수는 대략 130개 그러나 실제 웹 사이트에선 대략 20~30개 정도가 사용 HEADING ~ 문서 내의 제목표현시 사용. 제목 레벨 따라 h1 ~ h6 Paragraph 단락과 개행 블록 레벨 태그 LineBreak 개행 텍스트 태그 텍스트 표현 태그 4가지 (인라인 레벨 태그) 글자 굵게 표현 글자를 이탤릭체(글자 기울임)로 표현 밑줄 표현 중간선 표현 기타 태그 앵커(anchor) 태그 앞서 HTML의 HT는 하이퍼 텍스트의 약자 이며 이는 곧 링크를 의미 앵커태그는 링크 생성하여 다른 페이지로 이동, 현재 페이지 내에서 특정 위치로 초점 이동 외부링크 : 하이퍼 레퍼런스 속성인 href에 URL을 입력 google 내부링크 : 만약 href="#idid"이면 id값이 idid인 곳으.. 2019. 7. 22.

[Boost UI] HTML 다시보기 HTML 이란? / 문법 / 구성 Hyper Text Markup Language 웹페이지를 만드는 언어 Hyper Text = 링크 Markup Language 확장자가 html HTML 문법 태그 : 꼬리표 이름표라는 의미. contents 이 자체를 엘리먼트(요소)라고 부른다. 보통 이렇게 2개가 한쌍으로 구성된다. contents가 브라우저에 나타난다. 태그는 HTML에는 다양한 마크업 언어에서 모두 사용된다. 속성 : 태그에 추가 정보 제공 혹은 동작이나 표현을 조절할 수 있는 설정값 글로벌 속성은 모든 태그 사용가능 시작태그에 이름 = "값" 형태로 작성 하나의 태그에 여러 속성을 선언할 수 있다. 예시) 태그의 중첩 : 태그안에 태그 선언 가능 그러나 부모태그안에서 열림,닫힘태그 선언 예시).. 2019. 7. 20.

[Boost Web] 네이밍 컨벤션, 표기법 sp언더스코어, 스네이크 표기법, 밑줄 표기법 주로 DB 쪽이나 JS 쪽에서 지역 변수를 사용할 경우 언더바를 사용하는 표기법을 사용 local_data 카멜 표기법, 낙타 표기법 두 단어 이상의 변수명을 표기할 때 두 번째 단어부터 첫 글자를 대문자로 표기 localData 2019. 7. 15.

[Boost Web] html 상대경로, 절대경로 / 상대경로 절대경로 https://m.blog.naver.com/PostView.nhn?blogId=hyejungs88&logNo=220341143711&proxyReferer=https%3A%2F%2Fwww.google.com%2F 상대경로와 절대경로 지정하기 - href 속성, src 속성 상대경로와 절대경로 지정하기 링크를 거는 a 요소에 링크 경로를 지정할 때 또는,이미지를 삽입할때 사용... blog.naver.com 2019. 7. 11.

[Boost Web] 6. CSS의 구성 / style적용방법 / 상속과 우선순위 결정 / CSS Selector / Style 변경 / float 레이아웃 / 디버깅-HTML-CSS span { color : red; } span : selector(선택자) color : property red : value style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. ... 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는 여러.. 2019. 7. 8.

[Boost Web] 5. HTML 레이아웃 / HTML 구조설계 / class,id 레이아웃을 위한 태그 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다. header () section (영역 ex.검색창, 본문) nav (탭부분을 nav사용) footer (html5에 새로 추가된 태그이기에 데스크탑버전이 아닌 모바일 환경에서 쓸 수 있음) aside PC유저는 div태그로 header, nav, footer를 쓰지 않고 div에다 클래스이름으로 사용함 모바일에서는 그대로 많이 쓰임 html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다. 보통본문을 div로 사용 id값은 container,wrap으로 표현 HTML 구조설계 (ht.. 2019. 7. 7.

[Boost Web] 3. browser의 동작 / 구조 / 파싱방법 / HTML,CSS 구조 / 렌더링 참고사이트 웹을 통해서 전달되는 데이터는 어딘가에서 해석돼야 합니다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser'입니다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있습니다. 이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 반드시 알아야 하는 것은 아닙니다. 하지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있습니다. 학습 목표 HTML파일이 올 때 브라우저가 어떻게 렌더링과정(Web Browser Rendering)을 거쳐서 화면에 보이게 되는지 간단히 이해 브라우저의 동작에 대해 알아야하는 이유 소스를 더 빠르게실행시키기위함.. 2019. 7. 5.

[Boost Web] 2. 웹 Front-End 와 웹 Back-End 웹은 프론트엔드(FE)와 백엔드(BE)로 나눠집니다. 우리가 인터넷을 하기 위해서 브라우저에서 웹을 탐색하곤 하는데요. 브라우저를 프론트엔드 또는 클라이언트라고도 합니다. 웹백엔드는 인터넷 사용자에게는 보이지 않는 것이죠. 프론트엔드 웹프론트엔드? 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다. 또한, 사용자의 요청(요구사항)에 반응해서 동작합니다. 다른 말로 클라이언트 사이드라고 한다. 클라이언트의 입장에서 개발 진행 웹프론트엔드의 역할 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript HTML.. 2019. 7. 4.

[Boost Web] 1. HTTP 물리적인 하나의 서버에는 여러개의 서버가 동작 www은 인터넷 기반의 대표 서비스 중 하나이다. 각 서버는 포트값으로 동작. 인터넷은 네트워크의 네트워크 수많은 네트워크의 결합체 이 인터넷은 TCP/IP 프로토콜(약속)으로 연결됨 웹에선 상호통신을 위해 HTTP를 이용 HTTP는 어떤 종류의 데이터도 전송할 수 있다. HTTP는 현재 HTTP/2 버전까지 등장한 것. 현재는 1.1버전이 가장 많이 다뤄짐 HTTP를 무상태 프로토콜이라고도 부른다. HTTP 작동방식 HTTP는 서버/클라이언트 모델을 따릅니다. 장점 (무상태 프로토콜) - 불특정 다수를 대상으로 하는 서비스에는 적합하다. - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답.. 2019. 7. 4.

button 태그 / method="get" / method="post" 1. 버튼 모양을 나타내기 위한 태그 2. 버튼 태그에서 전송(Submit) 액션용 속성은? type속성의 submit타입 type="submit" 3. 현재 폼에 입력된 데이터를 모두 초기화하는 태그의 타입은? type태그 reset 타입 method가 get일때와 post일 때의 차이 비교 method="get"일 때 다음의 소스를 입력하여 브라우저에 하단 페이지를 띄운 뒤 이름과 전화번호란에 내용을 입력하면 URL에 입력한 내용이 나타난다. method="post"일 때 action=""의 ""안에는 서버측에서 무언가를 해야하기에 ""안에 파일이 있어야한다. post방식은 전송한 정보를 쿼리형태로 URL에 나타내지 않으므로 URL이 길어지지 않는다. 밑줄친 action의 값에 하단의 소스로 구성된 .. 2019. 6. 5.

form / input 태그별 속성 1. 웹 상에서 입력 항목을 구성할 때 사용하는 태그, 전체 폼의 부모 역할하는 태그는 무엇이며 이 태그의 상위태그는 무엇인가? 2. 값 전송시 자동 호출될 서버 프로그램 주소 지정하는 form태그의 속성은 무엇이며 어떻게 입력하는가? action속성 +. method="post"인 상황에서 서버측에서 요청에 대한 응답 반응을 전달해야 하기에 목적지 주소에 파일이 있어야 한다. +. post방식은 전송한 정보를 쿼리형태로 URL에 드러내지 않기에 URL이 길지 않다. 3. 전송에 필요한 HTTP 방식 설정하려면 어떤 속성을 쓰는가? method 4. 웹 상에서 입력 항목을 구성할 때 사용하는 태그는? +. input태그는 type속성에 따라 다양한 입력폼을 구성한다. 5. 속성 값에 따라 다양한 입력폼을.. 2019. 6. 4.

HTTP규칙, GET, POST 1. HTTP란 무엇인가 Hyper Text Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) 2. HTTP 역할 클라이언트가 서버에 요청하고 서버로 부터 응답을 받을 수 있게 해주는 규칙 3. 서버의 역할은? 클라이언트의 요청에 대한 응답을 보내주는 것 서버가 응답할 때 응답에 대한 정보(정보가 담긴 메시지를 HTTP메시지)를 담아 클라이언트로 보냄 4. HTTP(메시지)의 구성요소 3가지 시작줄 메서드 주소 버전으로 구성 Header 요청 방식(Method)에 대한 정보, 사용자 및 브라우저 정보 메서드는 어떤 주제를 가지고 대화할지를 입력 Body 서버에 요청을 할 때 함께 보낼 데이터를 담는 부분 5. 사용자(클라이언트)가 서버에 요청하기 위한 방법 2가지 GE.. 2019. 6. 4.

정적자원/ 정적,동적 페이지 / 상대경로 절대경로 일반적으로 사용자(Client)가 웹 페이지를 보려면 다음과 같은 구조, 과정을 거친다. 1. 웹 페이지를 제작할 때 여러가지 파일이 존재한다. 여러 파일 중 사용자의 행동, 입력에 의존적이지 않은 자원들을 무엇이라 하는가? 정적(Static) 자원(Resource) 1.1 정적 자원은 크게 4가지로 구분한다 웹 페이지 자체 페이지에 필요한 이미지 스타일 시트 자바스크립트 파일 2. 웹 페이지의 종류 2가지는 무엇인가? 정적페이지 동적페이지 3. 정적 페이지란? 클라이언트 요청에 이미 만들어진 HTML 페이지를 응답 논문, 블로그, 사전 등 4. 동적 페이지란? 클라이언트 요청에 실시간으로 페이지 변화를 응답 게시판, 로그인, 방명록 등 5. HTML파일은 어떻게 관리하는가? 파일의 위치, 경로파일 혹은.. 2019. 6. 4.

HTML 기본 / 엘리먼트(태그표현,속성,종류) / 테이블태그 / 리스트태그 1. HTML의 약자와 의미는? Hyper Text Markup Language 웹브라우저에 하이퍼텍스트(콘텐츠 연결링크) 기능(특정 구조로 이뤄짐)을 가진 문서를 만드는 언어 정형화된 문법으로 표현하여 웹을 보여줌 2. HTML 형식 표식은 태그로 불린다. 태그는 열고닫는 형태의 쌍(이를 Element라고 부름)을 이룬다 contents 3. 속성,설정값은 어디에 위치하는가 contents 예시1) contents 예시2) contents +) 예시2의 img태그는 닫는 태그가 없는데 이를 empty element라고 한다 4. HTML5를 선언.명시해야하는 이유는? HTML은 버전별로 지원하는 태그가 다르기에 어떤 버전으로 작성되었는지 미리 선언하여 브라우저가 버전에 맞는 내용을 표시하도록 하기 위함.. 2019. 6. 4.

이전 1 다음

티스토리툴바