WEB🔨 47

[CSS] flex

기본적인 HTML 구조 helloflex abc helloflex Flex는 여러가지 속성들을 가지고 있다. 하지만, 크게 보면 컨테이너에 적용하는 속성 아이템에 적용하는 속성 으로 나눌 수 있다. 컨테이너에 적용하는 속성 display: flex; .container { display: flex; /* display: inline-flex; */ } item들의 width는 자신이 가진 컨텐츠의 크기만큼 커지고, height은 부모인 container의 높이 만큼 커진다. inline-flex;는 container가 inline-box처럼 동작하게 할 수 있다. flex-direction .container { flex-direction: row; /* flex-direction: column; */ ..

WEB🔨/CSS 2020.06.12

[JavaScript] JS Flow - 함수 선언문과 함수 표현식

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 함수 선언문과 함수 표현식의 차이점 함수 선언문과 함수 표현식의 차이점은 할당을 하느냐 하지 않느냐 이다. //함수선언문 function a() { return 'a'; } //기명 함수표현식 var b = function bb() { return 'bb'; } //익명 함수표현식 //변수 c선언 //익명함수 선언 //변수 c에 익명함수를 할당 var c = function() { return 'c'; } 함수 ..

[JavaScript] JS Flow - 호이스팅(hoisting)

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 정의 변수 '선언'와 함수 '선언'을 끌어 올리는 것을 hoisting이라고 한다. 자바스크립트 엔진은 코드를 실행하기 전에 변수 선언과 함수 선언을 위로 끌어올린다. 그래서 아래와 같이 코드를 작성해도 오류가 발생하지 않는다. console.log(a()); console.log(b()); console.log(c()); function a() { return 'a'; } var b = function bb()..

태그해부학 <img>와 이미지포맷

정의와 사용방법 image의 줄임말로 말 그대로 사진을 넣을 때 사용하는 태그이다. 필수 속성으로는 사진의 위치를 넣는 src(source), 대체 텍스트를 넣는 alt(alternate)가 있다. alt속성은 해당 이미지가 별 의미 없는 이미지라면 값을 비워놓아도 된다. 하지만 웹 표준을 위해 꼭 속성은 써줘야 한다. 그리고 alt속성은 아래와 같은 상황이어서 이미지를 불러올 수 없을 때 나타나는 텍스트이다. 이미지를 보지 못하는 시각장애인 분들을 위해 스크린리더가 읽어주는 텍스트이기도 하다. src 속성이 비었거나 null임. src의 URL이 현재 사용자가 보는 페이지의 URL과 같음. 지정한 이미지가 손상돼 불러올 수 없음. 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, 요소의 속성에..

WEB🔨/HTML 2020.06.11

태그해부학 <ol>, <ul>, <li>

정의 및 사용방법 ol은 ordered list ul은 unordered list li는 list item의 약자이다. 목록을 나타내고 싶을 때 사용하는 태그이다. 순서가 중요한 목록이라면 을 사용하고, 중요하지 않다면 을 사용한다. 예를 들어, 조리법의 목록은 순서가 중요하므로 을 사용한다. 그리고 필요한 쟤료는 순서가 중요하지 않으므로 을 사용한다. 과 의 자식으로는 만 올 수 있다. 속성은 reversed, start, type이 존재한다. type속성을 사용해서 숫자를 로마숫자로 변경할 수도 있다. type의 값으로는 1, a, A, i, I가 있다. 위와 같이 중첩해서 사용할 수도 있다.

WEB🔨/HTML 2020.06.11

태그해부학 <h1> - <h6>

정의 및 사용 방법 - 문서의 제목을 표현한다. - h1부터 순차적으로 써야한다. - h1은 가장 중요한 제목이므로 한 번만 사용하는 것이 좋다. (스크린리더와 SEO에도 좋다.) Beetles External morphology Head Mouthparts Thorax Prothorax Pterothorax Heading elements Summary Some text here... Examples Example 1 Some text here... Example 2 Some text here... See also Some text here... 주 탐색창 하단 탐색창 위의 예제에서 스크린 리더는 두 개의 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다..

WEB🔨/HTML 2020.06.10