◆가변 그리드 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀 설정 값이 아닌 퍼센트(%) 설정 값 또는 가변 그리드 단위로 제작하는 기술이다. 가변 그리드 마다 계산하는 공식이 존재하고 공식이 모두 다르다. ●가변 그리드의 단위 가변 그리드의 단위들 vw vh vmin vmax em rem % vw : 웹 넓이를 100을 기준으로 크기를 결정함. vh : 웹 높이를 100을 기준으로 크기를 결정함. vmin : 높이와 너비중 짧은쪽을 100을기준으로하여 크기 결정. vmax : 높이와 너비중 긴쪽을 100을기준으로 하여 크기 결정. em : 부모의 font-size를 상속 받음. (1em = 부모 font-size) >> 부모 font-size가 설..
◆반응형 웹 (Resposible Web) 이란 ? 반응형 웹(Responsible Web)이란 디바이스(전자기기)별로 각각 레이아웃(grid)가 달라지는 웹이다. 쉽게 설명하자면 화면의 크기 마다 레이아웃이 달라진다. ◆미디어쿼리 (Media Query) 반응형 웹에서는 필수인 미디어쿼리는, 화면크기 마다 각각 다르게 CSS를 적용하는 것이다. 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다. CSS파일이나 ◆뷰포트 (ViewPort) Viewport란 모바일 브라우저에서 web conetent 를 출력하는 영역으로써, 일반 PC의 브라우저에서는 존재하지 않는 개념이다. Viewport는 웹페이지의 너비와 높이, 확대/축소 설정할 수..
속성: 값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다. 구글크롬의 개발자모드(f12)를 사용하면 쉽다. ●width , height width(가로길이), height(세로길이)를 의미한다. inline 요소에서는 적용되지 않는다. 값의 단위 auto -> 기본값, 브라우저가 계산한 너비 px -> 픽셀 % -> 부모 요소에 상대적인 너비 initial -> 기본값으로 초기화 inherit -> 부모 요소로부터 상속 받은 값 ●margin, padding margin은 바깥쪽 여백, padding은 안쪽 여백을 의미한다. 두 속성 모두 방향을 지정할 수 있다. width,height 속성과 마찬가지로 px, auto 등 값을 사용한다. ex ) margin:10px -> 상하좌우 모두..
◆ CSS 어떤 style로 요소(엘리먼트)가 표시되는지를 정하는 것이다. 공통되는 디자인을 갖는 문서가 여러개 존재할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는데, CSS는 이런 문제를 해결해준다. 웹페이지의 내용과 style을 분리해준다. ◆ CSS 적용법 HTML 태그에 style 속성을 주어 사용 (inline 방식) * ex ) 빨간색글자 .css 파일로 분리하여 HTML 문서에 연결 (import/linked/external방식) * ex ) Import/Linked/External 방식으로 따로 CSS 파일을 만들때는 반드시 확장자가 .css 이어야 하고, CSS 파일 최상단에 @charset "UTF-8"; 을 기술하여 한글로 인코딩 시켜줘야 한다. ◆ 선택자 어떤 태그(요..
◆HTML 태그 사용법 내용 ◆HTML body 태그 안에 사용되는 태그 ●글씨 관련 태그 bold 약자로 글자를 굵게 만드는 태그이다. italic 약자로 글자를 기울게 만드는 태그이다. underline 약자로 글자에 밑줄을 만드는 태그이다. 취소선 태그로, 글자에 선을 긋는 태그이다. 강조 태그이다. 태그와 비슷하기만 브라우저에서 음성지원시 음성강조 효과가 있다. ●글자 관련 태그 ,,,, h의 숫자가 작아지면 글씨 크기가 커진다. 자동줄바뀜과 위아래가 조금 띄어져 있다. 한자를 표시해주는 태그이다. 한자의 음과 뜻을 설명해줄때 사용하는 태그이다. 태그의 위에 표시된다. 단락 태그이다. 자동 줄바뀜 된다. 밑과 조금 띄어져 있다. ●파일 관련 태그 이미지를 넣는 태그이다. 옵션 src="url주소 ..
◆HTML 기본 구조 ◆html 버전 선언 해당 문서가 html5 버전으로 작성되었음을 선언한다. ◆head 태그 태그는 문서의 머리를 나타내는 태그이다, 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 선언된다. 주석은 처럼 작성한다. ◆head 태그 내부에 자주 사용되는 태그 제목 웹페이지의 제목을 지정하는 태그이다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있다. 유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요하다. 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그이다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 ..