듀의 자료저장소

문서의 유형(doctype)이 html이다. ▶ 현재 이 문서는 html 문서이다. 웹브라우저는 html5 문법에 따라 내용을 해석하고, 창에 띄워라! 라는 뜻. 웹브라우저 창에 나타나지 않는 내용. 대신 웹문서에 내재된 정보를 담는다. 인코딩 방법이나, 외부링크들을 가져와서 쓰는 용도. 실질적으로 화면에 드러나는 내용들 브라우저야 이제, html문법에 맞게 해석해줘! 시작과 끝을 알리는 태그. lang="ko" [지정해줘야 하는 이유] 1. 시각 장애인들을 위해 화면낭독기에서 웹문서를 읽어줄 때 기준점이 된다. (한글에 맞춰서 읽도록 자동설정) 2. 검색엔진에서도 한국어를 기준으로 검색해줌. (한국어 문서만 뜨도록 설정) title: 웹브라우저의 tab부분에 제목 표시 -meta태그는 화면 상에 드러나..

IT 공부/프론트엔드(Front-end) 2021. 7. 23. 13:09

[네이버와 동일한 카테고리 부분] 만들기 html 구조로 틀을 만들고, style에 css를 입혀준다. 1. 뼈대 만들기: 초록색: span 태그 이용 하얀색: span 태그 이용, div로 묶어주기 *span에는 초록색 입혀야하고, 밑에는 또 테두리선 입혀야해서 서로 분리시킴. h1+h2 h1 뒤의 h2를 초록색으로 칠해주겠다. ▶ Naver가 초록색됨. 선택자에서 ~와 +는 그 다음걸 적용한다는 뜻! (뎁스가 동일한지 여부를 잘 살펴볼 것!) h1~span: h1 뒤에 있는 span태그에 전부 초록색을 입히겠다. .box{ } span 태그에 class 연산자 붙여서, 테두리 만들어줌. ▶ border: 3px solid black; ** hover: 마우스 오버시 인터랙션 *마우스 오버: (마우스를..

IT 공부/프론트엔드(Front-end) 2021. 7. 13. 13:59

연결 선택자 = 컴비네이션 선택자 = 조합 선택자 말 그대로 두 개의 선택자를 연결하는 것이다. [하위 선택자] 상위 요소와 하위 요소 사이에 공백을 넣어서 쓴다. ▶ 부모 요소에 포함된 모든 하위 요소에 스타일이 적용. ex) section이라는 부모 요소 안의 모든 p 요소의 색상을 파란색으로 바꾼다. section p { color: blue; } section이라는 태그로 전체를 묶고 있는 게 보인다. section 태그 안의 모든 ul 태그에 스타일 적용해보기! (1px 파란색 점선을 표시할 것) 만약 문서 안에 여러개의 섹션태그가 있을 경우, id선택자를 이용해서 #container로 그 부분만 지정 가능! 이 섹션 안에만 있는 ul태그에만 적용이 된다. [자식 선택자] 부등호로 표시할 수 있..

IT 공부/프론트엔드(Front-end) 2021. 7. 6. 18:06

[캐스캐이딩 스타일 시트(CSS)] 여러 스타일을 적용할 때 스타일이 서로 충돌하는 걸 막기 위해 정해놓은 규칙 ex) p태그도 사용하고, 클래스도 쓰고, 인라인 스타일이 다 적용됐을 때 어떤 스타일이 적용될건지 우선순위를 정하는 방법이다. -캐스캐이딩의 규칙 1. 우선순위를 따른다. 2. 부모요소에서 자식요소로 (위에서 아래로) 1. 중요스타일 1-1. 사용자 css 1-2. 제작자 css 2. 일반스타일 2-1. 제작자 css 2-2. 사용자 css 3. 브라우저 스타일 우선순위는 위와 같습니다. 사용자 스타일 같은 경우, 시스템에서 세팅해놓은 것이라 유저가 손 댈 수 없습니다. 제작자 스타일은 웹사이트를 만들때 css로 만드는 것을 뜻합니다. 브라우저는 기본값으로 지정해놓은 스타일들이 존재합니다. ..

IT 공부/프론트엔드(Front-end) 2021. 6. 25. 13:44

웹 표준이 나오기 전에는 콘텐츠(html)와 디자인(css)이 합쳐져 있었다. 지금은 이 둘이 분리되어 있어서, 한쪽을 건드리지 않고 css만 입히는 게 가능해졌다. html 마크업으로 구조를 세우고, css로 디자인을 입히면 웹 문서 형태가 된다. css zen garden이라는 사이트에 들어가면, html 구조는 같고 css만 변경한 사례들을 확인 가능하다. 이지스퍼블리싱의 CSS 기초 및 주요 선택자 인강을 들었다. p{ text-align: center; } 선택자란 어디에 적용될 지를 나타내는 것. →p 태그에 text-align(가운데 정렬)속성을 적용하겠다 p {color: blue; font-size: 18px; } → 한 선택자 안에 여러 속성을 지정 가능하다. 세미콜론으로 구분만 해준다..

IT 공부/프론트엔드(Front-end) 2021. 6. 25. 11:33

출처: 《Do it! HTML5+CSS3 웹 표준의 정석 - 개정판》 07 - 폼과 input 태그 저자 직강 을 만들 때, 형태를 만드는 것은 html태그를 이용한다. 정보를 저장, 검색, 수정하는 일은 서버 프로그래밍을 써야 한다. →웹서버에서 오는 반응은 ASP나 PHP 이용. 브라우저창에 원하는 정보를 입력하는 것까지는 HTML로 구현. 그 정보를 서버로 넘겨주는 것은 이제 서버 프로그래밍의 영역이다. method와 action 속성이 핵심이다. [method] ① get: 서버 쪽으로 넘길 수 있는 글자 수에 제한 있음. 주소표시줄에 유저가 입력한 내용이 그대로 드러난다. →유저가 입력할 검색어가 길지 않음 →주소표시줄에 정보가 노출되어도 문제 없음. ② post: 아이디와 비번을 입력했을 때 ..

IT 공부/프론트엔드(Front-end) 2021. 6. 2. 21:12

태그에서 입력 형태를 지정할 때는 type속성을 사용합니다. 위 표는 기능을 간략하게 정리한 것인데요. 두잇 시리즈에서 나온 웹 표준의 정석 개정 2판 143P를 참고하시면 됩니다. *어떻게 쓰이는지는 아래 차근차근 vscode로 구현해보려합니다. 1. type="hidden": 히든필드 기능 type 속성에서 히든 기능은 "사용자가 입력을 마치고 폼으로 전송할 때 서버로 함께 전송되는 요소" →그러나 화면상의 폼에 보이지 않게 하는 것입니다. 사용자에게 보여줄 필요는 없으나 관리자는 알아야하는 것을 히든 필드로 입력합니다. *히든 필드의 값도 서버로 전송됨 *hidden 필드 삽입시, name속성을 이용해 이름 지정, 실제 값은 value 속성을 이용해 서버로 넘깁니다. → 아직 실제로 써본 적이 없으..

IT 공부/프론트엔드(Front-end) 2021. 5. 14. 22:30

웹에서 폼(form)은 '사용자가 웹 사이트로 정보를 보낼 수 있는 요소들'을 의미한다. HTML로, 이 형식을 구현가능한데 대충 어떤 원리로 돌아가냐면 아래와 같다. * [로그인할 때_ flow chart] 1. 사용자가 아이디와 비밀번호 입력 2. [로그인] 버튼 클릭 3. 입력 내용이 서버로 보내짐. 4. 서버는 자신이 지닌 사용자 데이터베이스를 뒤진다. 5. 사용자가 보내온 아이디와 비밀번호가 서로 일치하는 정보인지 여부를 확인하고, 그 결과값을 브라우저에 보냄. →폼과 관련된 작업: 정보를 저장, 검색, 수정하는 일. (데이터베이스를 기반) [프론트엔드와 백엔드 영역] *폼의 형태를 만드는 것:html *폼에 입력한 사용자 정보를 처리: ASP, PHP, JSP (서버 프로그래밍 영역) EX) ..

IT 공부/프론트엔드(Front-end) 2021. 5. 14. 20:32