본문 바로가기

Progamming93

CSS 선언방법 들어가기 전에CSS를 HTML안에 선언하는 방식은 크게 세가지가 있다. 학습 목표1. CSS 선언 방식을 이해하고 활용할 수 있다. 핵심 개념- inline- internal- external CSS 기본사용법- (1) span {(2) color : (3) red; }· (1) : selector(선택자)· (2) : property· (3) : value· div > p : div 하위의 p 영역을 의미 sytle을 HTML 페이지에 적용하는 세가지 방법- inline : HTML 태그 안에 직접 넣는 방법 → 좋은 방법은 아님. 구조를 표현하는 HTML에 CSS가 들어있으면 구조와 스타일이 섞이게 되므로 유지보수와 관리가 어렵다. element.style로 DOM 트리에 보여짐- internal :.. 2019. 1. 16.
class와 id 속성 들어가기 전에HTML 속성 중 class와 id란 무엇이며 어떻게 사용할까? 고유한 값인 id와 중복사용이 가능한 class의 활용 방법에 대해 알아보자. 학습 목표1. class와 id의 목적을 이해하고, 구분해서 작성할 수 있다. 핵심 개념- HTML 태그 안에서 사용되는 class 속성과 id 속성 id- identifier : 고유한 값이기 때문에 하나만 써야한다. 하나 이상 써도 오류가 나지 않기 때문에 의도적으로 하나를 쓰도록 노력해야 함- 각각 하나하나 어떤 특별한 제어를 할 수 있으며 검색에도 용이하다. class- 하나의 HTML 안에 중복해서 쓸 수 있다.- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있다.- 같은 class에는 동일한 CSS 스타일을 부.. 2019. 1. 16.
HTML 구조설계 들어가기 전에웹페이지를 만드는 것은 문서의 구조, 즉 제목, 단락 등을 잡는 것과 같다. 그런 관점에서 웹사이트의 문서 구조를 만드는 것이 가장 먼저 할 일이다. 학습 목표1. CSS 없이 먼저 HTML 구조를 설계할 수 있다. 핵심 개념- HTML 구조화 설계 HTML 구조 설계(HTML structure design)구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML 개발을 시작한다. 즉, 어떠한 화면을 보면서 그대로 구현하는 것이다. 그 화면을 보면서 구조를 분석해야 한다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리한다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반.. 2019. 1. 16.
HTML Layout 태그 들어가기 전에'레이아웃(Layout)'이란 '배치'라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지 결정하는 것을 말한다. 기본적으로 상단의 , 하단의 그리고 가운데의 본문 영역이 있다. 학습 목표1. 레이아웃(전체 페이지 구성)을 위한 적절한 HTML 태그들을 이해한다. 핵심 개념- HTML layout 태그들 레이아웃을 위한 태그- 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 쓴다.· header· section· nav· footer : 제대로 인식을 지원하는 브라우저는 제한적이다. HTML5에서 새로 추가된 태그이기 때문에, 보통 데스크탑 버전에서는 쓰지 않고, 최신 브라우저들이 많은 모바일 환경에서 주로 사용한다.· aside : side 쪽에서 .. 2019. 1. 16.
HTML Tags 들어가기 전에HTML 태그는 많은 종류를 가지고 있고 각각의 쓰임새에 대한 정확한 의미가 있다. '각각의 의미를 지닌다'는 것을 'Semantic'한 태그, 혹은 'Semantic하다'라고 표현한다. 그렇기 때문에 많은 태그를 각각의 용도와 쓰임에 맞게 잘 사용해야한다. 이번에는 그 의미에 맞게 사용할 수 있도록, HTML의 중요한 태그에 대해서 알아보자. 학습 목표1. HTML 태그를 이해하고, 이를 사용할 줄 안다. 핵심 개념- HTML tag tag의 종류- HTML 태그는 굉장히 많은 것들이 있다. 태그들은 모두 다 각각의 쓰임새에 대해서 정확한 의미를 가진다.- 태그는 그 의미에 맞춰서 사용해야 한다.· 링크· 이미지· 목록· 제목- anchor 태그, img 태그, ul / li 태그, hea.. 2019. 1. 16.
WAS 들어가기 전에 WAS는 무엇이고, 왜 필요한지, 그리고 어떤 종류의 WAS가 있는지 알아보자. 또한, 웹 서버와의 차이점은 무엇인지 알아보자. 학습 목표1. WAS가 무엇인지 알아보자.2. WAS의 종류를 알아보자.3. 웹 서버와 WAS의 차이점을 설명해보자. 핵심 개념- WAS(Web Application Server)- Apache Tomcat 클라이언트/서버 구조- 클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용한다.· 웹 서버와 웹 클라이언트가 대표적인 서버와 클라이언트의 관계 DBMS(Database Management System)- 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어· DB.. 2019. 1. 15.
웹 서버 들어가기 전에 웹 브라우저를 실행한 후 주소 입력창에 URL 주소를 입력하면, 그 URL 주소에 해당하는 결과물이 화면에 보인다. 우리가 현실에서 주소를 보고 집을 찾아가는 것 처럼, 웹 브라우저는 URL 주소에 해당하는 웹서버(Web Server)에 연결하고, 해당 주소에서 볼 수 있는 내용을 읽어들여 보여주게 된다. 웹 브라우저의 요청을 받아 HTML 문서나 오브젝트를 반환하는 웹 서버에 대하여 알아보도록 하자. 학습 목표1. 웹 서버의 기능에 대하여 알아보자.2. 웹 서버의 종류에 대하여 알아보자. 핵심 개념- Apache- Nginx- HTTP- 클라이언트(Client)- 서버(Server) 웹 서버란?- 웹 서버는 소프트웨어(software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨.. 2019. 1. 15.
browser에서의 웹 개발 들어가기 전에웹 클라이언트 코드는 브라우저 안에서 동작한다. HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴보자. 학습 목표1. HTML 요청 이후 브라우저에서 해석되는 웹페이지(HTML) 안의 내용구성과 소스코드를 어떻게 위치시키면 될 지 이해한다. 핵심 개념- Browser 안에서 동작할 수 있는 HTML, CSS, JavaScript의 코드 구현 방법 HTML 문서구조- 뜯어보자 웹사이트 !· 크롬 브라우저에서 개발자도구(Ctrl + Shift + i) 열기 : 브라우저에서 직접 코딩하는 것이 아니라 작서한 코드가 잘 동작되는지 확인, 디버깅 - 알게 된 몇가지 특징· HTML 문저는 태그로 시작해서 태그로 끝난다.· 는 무엇을 하는걸까? : HTML 문.. 2019. 1. 15.
browser의 동작 들어가기 전에 웹을 통해서 전달되는 데이터는 어딘가에서 해석되어야 한다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser' 이다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있다. 이런 작업의 대부분은 브라우저 내부에서 이루어지기 때문에 반드시 알아야하는 것은 아니지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있다. 학습 목표1. HTML 파일이 올 때 브라우저가 어떻게 렌더링과정을 거쳐서 화면에 보이게 되는지 간단히 이해한다. 핵심 개념- Web Browser Rendering Browser의 동작 1 - 브라우저는 월드와이드웹(WWW).. 2019. 1. 15.

티스토리툴바