HTML & CSS (+접근성)

- HTML, CSS, JAVASCRIPT - 웹표준, 웹 접근성, 크로스브라우징 아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. 문법 html은 여는 태그와 닫는 태그로 구성되어 있다. (예외 : 일부 빈 태그는 닫는 태그가 없음) 속성과 값이 있고, 태그에 따라 필수 속성이 있다. 구조에 따라서 부모와 자식 요소, 조상요

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. HTML Tag 정리1

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. HTML Tag 정리

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS Declaration 문법 선택자 (속성과 값을 지정할 대상을 검색 및 선택), 속성, 값으로 구성 선언방식 inline : html의 요소에 직접 작성 (선택자가 별도로 필요하지 않음

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS selector 기본 선택자 * : (전체 선택자) 내부의 모든 요소를 선택 태그명 : (태그 선택자) 태그 이름을 선택자로 선택 .클래스이름 : (클래스 선택자) 클래스 이름을 선택자로

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. Box 모델 css를 사용하여 브라우저의 화면을 구성하기 위해서는 box 모델을 이해하는 것이 매우 중요하다. css의 property중에는 html의 박스타입에 영향을 주는 property가 있

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. background(단축) -color : 배경색상 지정 -image : 요소에 하나 이상의 이미지 (다중이미지: 먼저 작성된 이미지가 위에 쌓임, ie 이하 불가능)를 삽입 -repeat :

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. flex-box 수평, 수직 정렬과 관련된 속성 (container, item로 이루어짐) display: flex : container가 block (flex container로 정의함!) di

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS Grid 2차원 행과 열의 레이아웃 시스템을 제공한다. (flex와 마찬가지로 container와 item으로 구성된다.) 배치와 정렬의 개념을 가질 수 있다. container |값|의

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. Transitions (전환효과) (단축)속성의 시작과 끝을 지정하여 중간값을 애니메이션 위 코드는 순서대로 transition이 적용될 속성, 전환효과의 지속시간, 전환효과 타이밍 함수 이다.

웹 표준 웹 표준은 W3C에서 제정하고 있는 공식 표준기술을 얘기하는 것으로 점차 중요도가 높아지고 있다. 웹 접근성 최근 우리의 일상생활을 들여다보면 IT 기술이 사용되지 않는 곳이 없다고 봐도 무방할 정도로 많은 곳에서 다양한 IT기술들이 활용되고 있다. 하지만

아래 내용은 학원 수업을 듣고 정리한 내용입니다. HTML 작성을 하려고 하면, 무엇부터 해야 할까? 어디서부터 시작해야할까? 시안 분석 디자인 된 파일을 HTML 파일로 만들기 위해서 제일 먼저 해야할 일은 무엇일까? 바로 시안을 분석하는 것이다. 시안을 분석하

접근성 HTML 문서를 작성하다보면 우리는 음성 보조기기 등을 사용하는 사용자들을 배려하기가 쉽지 않다. 내가 직접 겪은 문제가 아니기 때문에 필요성을 잘 느낄 수 없기 때문이다. 하지만 이런 문제는 반드시 해결되어야 하는 문제이다. 일반 사용자와 완전히 같은 페이지를

img 공백 발생 block 박스 안의 inline 요소는 line-height로 인해서 gap이 발생한다. 이 것은 inline 요소가 해당 요소를 텍스트처럼 인식하기 때문이다. 기본적으로 컴퓨터 그리고 html은 서구 문화권에서 시작되었다. 때문에 자연스럽게 서

blur 효과 모바일이나 웹사이트를 이용하다 보면, 기존의 화면 위에 팝업창과 같은 보조 창이 뜨게 될 경우 뒷 화면이 블러 처리가 되는 경우나, 배경 이미지가 블러처리 되어 있는 경우가 있다. 이 부분은 어떻게 처리하는 것이 좋을까? 배경이미지의 경우 포토샵에서 블

웹 사이트(혹은 웹 어플리케이션)을 만드는 이유는 뭘까? 일반적으로 내 제품을 홍보하거나 웹 사이트의 서비스 자체가 비즈니스이기 때문이다. 그렇다면 내 제품, 웹 사이트의 서비스를 효과적으로 홍보하기 위해서는 어떻게 해야할까? 요즘에는 검색이 워낙 활성화되어 있기 때문

디자이너에게서 디자인을 받아서 실제로 구동되는 화면으로 개발을 진행하다 보면 넓이와 높이, 여백, 폰트 사이즈 등 다양하게 단위를 지정하고 사용해야 하는 상황이 생긴다. 이 때 개발자는 고민에 빠지게 될 것이다. 어떤 단위를 사용하지? 단위를 어떻게 지정해야 할까?하지