frontend

CSS2 (Position & Flex)

box3 box1 box2 absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치한다.부모가 없다면 html의 root 요소를 기준으로 삼는다 (html 태그)normal flow 상에서 absolute속성을 가진 element의 뒤에오는 요소는 absolute 요소의 앞 요소 뒤에 붙게된다.absolute = normal flow에서 벗어난 것이기 때문에 box1 box2 box3 3.4 position : fixed스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않길 원한다면, fixed 속성을 이용현재 사용자가 보고있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 한자리에 계속해서 위치한다.네비게이션 같은 중요한 정..

CSS1 (기초 & CSS Box Model)

1. 이 글자는 어떤 색일까요? 2. 배경색은 어떤 색일까요? /* 클래스 + 유형 선택자 */ .ul a { color: yellow; } /* 클래스 선택자 */ .click { color: green; background: black; } /* 유형 선택자 */ html body main section article div ul li p strong span a { background: purple; color: blue; }노란색검은색🤔클래스 + 유형은 11점이고, 클래스는 10점이고, 타입 선택자 12점이니, 1번의 답은 파란색, 2번의 답은 보라색이어야하는거 아닌가요? 아무리 구체적으로 작성하였다 하더라도! 가중치의 점수가 클래스선택자 > 유형 선택자 가중치 법칙을 이길 수는 없다!3. 중요성..

HTML_2 (form, table)

1. 다양한 태그들3. Contentsh1,h2,h3,h4,h5,h6 : Heading(제목)웹페이지의 구조를 보여주는 목차h1~h6 순서대로 작성해야한다.h1은 페이지에서 가장 중요한 제목을 표시하며 한번만 사용한다.h2, h3는 섹션 제목, 하위 섹션의 제목에 사용한다.스타일링을 위해 사용하지 않는다.a : Anchor다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결 할 수 있는 하이퍼링크를 만든다inline 요소이지만, 예외적으로 블록 요소들을 감쌀 수 있다!b.html으로 이동 b.html 새탭으로 이동 b.html 파일 다운로드 mailto:google@gmail.com 010-1234-1234href 속성과 id를 사용해서 페이지 내에서 이동하는 해시(#..

HTML_1 (기본개념)

1. HTML 문서해부HTML (Hyper Text Markup Language): 모든 사람들이 똑같은 문서를 어디서나 볼 수 있도록 하기위해 만들어진 형식Hyper Text : 링크 (텍스트와 텍스트 사이를 클릭으로 이동 가능)구성요소DTD(Document type Definition)라고 부르며 문서의 타입에 대한 정보를 제공해당 코드를 통해 어떤 모드로 페이지를 렌더링할지 결정작성하지 않으면 쿼크모드로 html을 렌더링하는데, 브라우저마다 구성방식이 다르므로 문서 최상단에 DTD를 작성해주는 것이 좋다.페이지의 주 언어가 무엇인지를 설정검색엔진, 스크린 리더, 번역기능 제공 등에 도움이 된다.head기계가 식별할 수 있는 문서정보(metadata)를 담는다검색엔진을 위한 다양한 정보들이 담기는 곳..