본문 바로가기

부스트코스25

[부스트코스] 4-2 CSS 이해하기 4. CSS 이해하기 7) 가상 선택자 1 가상 클래스(pseudo class) 가상 요소(pseudo element) 가상 클래스 미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스 :pseudo=class { property: value; } 문서 구조와 관련된 가상 클래스 :first-child: 첫 번째 자식 요소 선택 :last-child: 마지막 자식 요소 선택 li:first-child { color: red; } li:last-child { color: blue; } HTML CSS JS 링크 관련된 가상 클래스 :link: 하이퍼링크이면서 아직 방문하지 않은 앵커 :visited: 이미 방문한 하이퍼링크를 의미 a:link { color: blue; } a:visited.. 2022. 3. 16.
[JS] 웹과 JavaScript 1. 수업소개 2. 수업의 목적 Javascript의 역할 자바스크립트의 가장 중요한 역할은 사용자와 상호작용할 수 있게 하는 것 3. HTML과 JS의 만남 : script 태그 JavaSciprt는 HTML 위에서 동작하는 언어 script 태그 안에는 Javascript 코드를 쓸 수 있음 JavaScript html hello world 다른 게 없어 보이지만, 다르다. JavaScript html 1+1 자바스크립트는 동적이다. 4. HTML과 JS의 만남 : 이벤트 (event) hi 버튼을 클릭했을 때, 경고창이 뜬다. onclick에는 자바스크립트 언어가 와야 한다. https://www.w3schools.com/js/js_events.asp 5. HTML과 JS의 만남 : 콘솔 크롬 오른.. 2022. 3. 15.
[부스트코스] 4-1 CSS 이해하기 4. CSS 이해하기 1) CSS 소개 Cascading Stylle Sheets(CSS) HTML(마크업 언어)을 꾸며주는 언어 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할 reference http://www.csszengarden.com/ 2) CSS 문법과 적용 h1 { color: yellow; font-size: 2em; } 선택자(selector) 속성(property) 값(value) 선언(declaration) 선언부(declaration block) 규칙(rule set) 주석(COMMENT TAGS) /* 내용 */ CSS 적용방식 /* Inline */ 내용 /* Internal */ /* External */ /* @import */ @i.. 2022. 3. 15.
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록 3. 콘텐츠모델, 시멘틱마크업, 블록 1) 콘텐츠 모델 Metadata Flow Sectioning Heading Phrasing Embedded Interactive METADATA 콘텐츠의 style(표현), script(동작)을 설정하거나, 다른 문서와의 관계 등의 정보를 포함하는 요소 base, link, meta, noscript, script, style, title 에 포함됨 FLOW 문서에 사용되는 대부분의 요소 a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, field.. 2022. 3. 14.
[부스트코스] 2-2 HTML 태그 2. HTML 태그 8) 테이블 요소 1 표 (TABLE) 데이터 표를 나타내는 태그 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있음 행(가로 방향) row, 열(세로 방향) column , : 데이터 셀(table-cell) : 행(table-row) : 표 테이블 구조 관련 태그 : 표의 제목 : 제목 행을 그룹 : 바닥 행을 그룹 (이 뒤에 위치해야 함) : 본문 행을 그룹 Monthly Savings Month Savings Sum $180 January $100 February $80 테이블 관련 속성 colspan: 셀을 가로방향으로 병합 rowspan: 셀을 세로방향으로 병합 Monthly Savings Month Savings Sum January $100 February 9) 테이블.. 2022. 3. 13.
[부스트코스] 2-1 HTML 태그 2. HTML 태그 1) HTML 태그 소개 존재하는 태그는 100여개가 넘지만, 실제 사용하는 태그는 한정적임 Reference https://www.advancedwebranking.com/seo/html-study/#overview 2) 제목과 단락요소 Heading 태그 (h1~h6) paragraph 태그 (p) Linebreak 태그 (br) 제목 (HEADING) Hello 문서 내에 제목을 표현할 때 사용 h1~h6 역사 개발 팀 버너스리 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계.. 2022. 3. 12.

티스토리툴바