본문 바로가기

Web

 (40)
[WEB] CSS 기본 Style Font 색상변경123color : red;color : rgba(255, 0, 0, 0.5);color : #ff0000;cs Font 사이즈 변경12font-size : 16px;font-size : 1em;cs 배경색12345background-color : #ff0;background-image : ;background-position : ;background-repeat : ;background : #0000ff url(“.../gif”) no-repeat center top; Colored by Color Scriptercs 글씨체/글꼴12font-family : "Gulim";font-family : monospace;cs 웹폰트브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드받..
[WEB] CSS Selector CSS SelectorHTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법 ∎ tag로 지정하기12345 span { color : red; }cs ∎ id로 지정하기123456789 #spanId { color : red; } Hello World! Colored by Color Scriptercs ∎ class로 지정하기123456789 #spanClass { color : red; } Hello World! Colored by Color Scriptercs CSS Selector의 다양한 활용∎ id, class 속성을 요소 선택자와 함께 활용123456span#mySpanId { color : red;}div.myDivClass { color : green;}cs ∎..
[WEB] CSS 선택자 우선순위 CSS 상속상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.ex) width, height, margin, padding, border 선택자 우선순위(CSS Specificity, Cascading Order) ∎ 선언 방식에 따른 차이123456span { color : red;}span { color : blue;}cs같은 선택자라면 나중에 선언한 것이 적용된다. => blue 123456body > span { color : red;}span { color : blue;}cs선택자의 표현이..
[WEB] CSS 선언방법 및 적용방법 CSS 선언방법123span { color: red;}csspan : selector(선택자)color : propertyred : value CSS를 HTML에 적용하는 방법∎ inline HTML 태그 안에다가 넣는 방법으로, 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다.1​cs ∎ internal style 태그로 지정하는 방법으로 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 브라우저가 요청을 보낼 필요가 없다.1234567891011121314 p { font-size: 2em; border: 1px solid gray; color: red; } Hello CSS cs ∎ external 외부파일(.css)로..
[WEB] HTML 기초(id, class, data 속성) id 속성고유한 속성으로, 한 HTML문서에 하나만 사용가능하다. (여러 개를 사용해도 에러가 나지는 않는다.)고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다. class 속성하나의 HTML 문서 안에 중복해서 사용가능하다.하나의 태그에 여러 개의 다른 class를 공백을 기준으로 나열할 수 있다.홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class의 사용이 필수적이다. data 속성tag에 추가적인 데이터 정보를 표현하기 위해 사용한다. 참고자료https://www.edwith.org/
[WEB] WAS 클라이언트/서버 구조클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답받은 결과를 사용한다.웹 서버와 웹 브라우저가 대표적인 클라이언트/서버 구조에 해당한다. DBMS(Database Management System)다수의 사용자들이 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어이다.ex) MySQL, MariaDB, Oracle, PostgreSQL 등 미들웨어(MiddleWare)클라이언트와 DBMS사이에 또 다른 서버를 하나 더 두는 방식이다.클라이언트는 단순히 중앙에 있는 서버로 요청만 보내고, 미들웨어에서 대부분의 로직을 수행한다.이 때, 데이터를 조작할 일이 있으면 DBMS에 요청하며, 클라이언트는 그 결과를 받아 화면에 보여준다.단순히 클라이언트와 서버만으로 이루어진..
[WEB] 웹 서버 웹 서버란?웹 서버는 소프트웨어 또는 웹서버 소프트웨어가 동작하는 컴퓨터를 말한다.웹 서버의 가장 중요한 기능은 클라이언트가 요청하는 HTML문서나 각종 리소스를 전달하는 것이다.웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적인 데이터이거나 동적인 결과일 수 있다. 웹 서버와 웹 브라우저 간의 통신웹브라우저와 웹서버 간에는 보통 HTTP를 통해서 통신을 한다.※ 주요 흐름1. 웹 서버는 사용자가 요청한 HTML문서를 웹 브라우저에게 전달한다.2. 웹 브라우저는 웹 서버로부터 전송받은 HTML문서를 읽어들인 후에 해석을 한다.3. HTML문서를 알맞게 보여주기 위해서 필요한 리소스들에 대해서 URL을 추출해낸다.4. 웹 서버에게 동시에 여러 개의 리소스를 요청하게 된다.5. 웹 서..
[WEB] Browser 동작 방식 Browser란?WWW에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어. Browser의 주요 기능HTML, CSS 등의 파일을 해석하여 화면에 표시한다.자원은 일반적으로 HTML 문서이지만 이미지 등 다른 유형의 콘텐츠일 수도 있으며, 자원의 위치는 URI를 이용하여 사용자가 지정한다. Browser의 구조1. 사용자 인터페이스(User Interface)주소 표시줄, 뒤로/앞으로 가기 버튼, 북마킹 메뉴 등이 포함된다. 2. 브라우저 엔진(Browser Engine)UI와 렌더링 엔진 간의 작업을 마샬링한다.※ 마샬링 한 객체의 메모리에서의 표현방식을 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정이다. 또한 이는 데이터를 컴퓨터 프로그램의 서로 다른 부분 간에 혹은 한 프로그램에서 ..
[WEB] 프론트엔드, 백엔드 프론트엔드(Front-End)사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공하며, 사용자의 요청에 반응해서 동작한다.클라이언트의 입장에서 개발이 진행된다. (Client Side)HTML - 구조CSS - 디자인JavaScript - 동작 - HTML12345678910 hello hello HTML5! cs - CSS123456789101112#spotNonExist { width: fit-content; margin: 0 auto; font-size: 20px; text-align: center;}.my-content { display: inline-block; width: 250px; margin: 20px 5px; cursor: pointer;}cs - JavaScript12..
[WEB] 웹 동작 방식 인터넷(네트워크 통신)의 이해WWW(World Wide Web)이 인터넷의 전부는 아니다.인터넷(Internet) : TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크의 결합체물리적인 하나의 컴퓨터에는 여러 개의 서버가 동작할 수 있음. 각각의 서버들은 포트라는 값으로 구분되어 동작한다.이름프로토콜 포트 기능 WWW HTTP 80 웹 Email SMTP/POP3/IMAP 25/110/114 이메일FTP FTP 21 파일 전송 DNS DNS 23 네임NEWS NNTP 119 인터넷 뉴스 HTTP(Hypertext Transfer Protocol)란?서버와 클라이언트가 인터넷 상에서 데이터를 주고받기 위한 프로토콜로 팀 버너스리에 의해 발명되었다.팀 버너스리는 CERN에서 HTML뿐..

티스토리툴바