HappyWeasel

상속 test test span dummy span p test 위의 코드와 같이 css 코드의 selector(선택자)에 상속 범위를 지정할 수 있다. 나열하는 방식 위와 같이 div ul span{ ... } 직계 자식만 적용하는 방식 div > ul { ... } ul의 하위 자식은 영향을 받지 않는다. 상위에서 적용한 스타일은 하위에도 반영된다. 하지만 모든 CSS 속성이이런 특징을 갖게 되면, 몇몇의 문제가 생긴다. 예를 들면 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있다. 그래서 box-model(width, height, margin, padding, border)과 같이 크기와 배치 관련 된 속성들은 하위 엘리먼트로 상속되지 않는다. 우선순위 css 적..

style을 HTML 페이지에 적용하는 3가지 방법 inline HTML 태그 안에 적용 다른 CSS 파일에 적용한 것 보다 우선적으로 적용된다. internal style 태그로 지정한다. 구조와 스타일이 섞이기 때문에 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다. ... external 외부의 css 파일을 지정하는 방식이다. css 코드가 길면 해당 방법으로 구현하는 것이 좋다. link 태그로 추가한다. 우선 순위 inline > internal = external

HTML - 블록 레벨(Block Level) 요소와 인라인(Inline) 요소와 1. 블록요소 DIV, H1, P 사용 가능한 최대 가로, 너비를 사용한다. 크기를 지정할 수 있다. width : 100%, height : 0%가 디폴트이다. 출력물이 수직으로 쌓인다.(자동으로 개행) margin, padding을 위, 아래, 좌, 우 모두 사용 가능하다. Layout을 잡는 용도로 많이 사용된다. display: block; => 디폴트이다. 2. 인라인 요소 SPAN, IMG 필요한 만큼의 너비를 사용한다. 크기를 사용자가 지정할 수 없다. (출력하는 문자열을 감싸는 만큼의 영역을 가진다.) width : 0, height : 0이 디폴트이다. 출력물이 수평으로 쌓인다. (개행이 X) margin,..

이보다 쉬울 수 없는 CSS 문법 CSS 문법은 HTML 보다 더 쉽습니다. 아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 기본 문법은 충분합니다! div { font-size: 20px; color: red; } /* 다음과 같이 이해할 수 있습니다. */ 선택자 { 속성: 값; 속성: 값; } 선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)입니다. “빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!”, “파랑 글자색(CSS, color: blue;)은 여기 본문(HTML, )에 적용하겠어!”와 같이 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고..

https://validator.w3.org/#validate_by_upload The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 위의 사이트에 구현한 웹 사이트 주소를 입력하면 정확하지는 않지만 어느 정도 유효성 검사가 가능하다.

출처 : https://heropy.blog/2019/04/24/html-css-starter/ 퍼스트캠프 - React 입문 과정 웹에서 사용하는 이미지 비트맵과 벡터 이미지 이미지(그래픽)는 크게 비트맵과 벡터로 구분됩니다. 비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 픽셀 단위로 화면에 렌더링합니다.(렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 합니다) 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식입니다. 그림판, 포토샵과 같은 툴로 편집할 수 있습니다. 벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물입니다. 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히..

img 이미지를 불러온다. img는 닫히는 Tag가 없는 빈 (Empty) Tag이다. ( 구조가 아니다.) src => 경로 / alt => 대체 텍스트 div 의미가 없는 분할 홍길동 class => 별명

Preferences > Keyboard Shortcut(바로 가기 키) 에서 단축키를 확인하거나 변경할 수 있습니다. "를 사용하면 키 바인딩을 검색할 수 있습니다. "를 닫으면 정확한 검색을 요구하므로 "cmd + p와 같이 "를 닫지 않고 검색하는 것을 추천합니다. Windows 단축키macOS 단축키설명 “Ctrl + B” “Cmd + B” 사이드바 열기/닫기 “Ctrl + P” “Cmd + P” 빠른 열기(파일이나 기호 탐색) “Ctrl + Shift + P” “Cmd + Shift + P” 모든 명령 표시(에디터의 모든 명령에 접근) “Ctrl + F” “Cmd + F” 찾기(검색) “Ctrl + H” “Cmd + Opt(Alt) + F” 찾기(검색)/바꾸기(대체) “Alt + Up” “Alt..