박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 박스 모델 적용 위의 이미지와 같이 칸으로 나눠진 웹 페이지를 만들어 보자. 가로줄을 긋기 가로줄을 긋는다. 덤으로 h1 태그의 글자 크기와 정렬 위치를 변경한다. 개발자 도구를 이용해서 h1 태그의 디테일을 수정한다. (우클릭→ ‘검사’ 클릭) margin을 없애고 padding 20px을 추가한다. 세로줄 긋기 ul 태그는 block … 더 읽기
박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 박스 모델이란? 박스 모델이란 개념이 있다. 직관적으로 이해하기 위해서 구글에 검색해 이미지를 살펴보자. 구글에 박스 모델이라고 검색하면 아래와 같은 결과를 얻을 수 있다. 박스 모델에 대한 사전적 정의를 찾아보면 아래와 같은 대답을 얻을 수 있다. In CSS, the term “box model” is used … 더 읽기
CSS 등장 이전의 상황 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. CSS 소개 CSS(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)다. HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명 style.css이다. 출처 … 더 읽기
HTML 태그의 제왕 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. a tag 지금의 웹을 만든 중요한 태그가 있다. 웹과 웹이 서로 연결하는 <a> 태그가 그것이다. href : Hypertext + reference 자주 쓰는 형식은…. 출처를 표시하기 위해서 나무위키로 링크를 만들어보자. 웹 페이지 완성하기 강의에서는 위와 같이 링크를 연결한다. 나는 참고해서 링크를 구성하자. … 더 읽기
HTML이 중요한 이유 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. HTML을 의미에 맞게 사용한다는 것 중요하다. 검색 엔진은 웹 페이지에 담긴 html 코드를 분석한다. 태그에 근거해서 정리 정돈한다. 현대 사회에서 검색 엔진의 위상을 고려해 볼 html의 의미에 맞게 사용한다는 것은 비즈니스 측면에서 중요하다. 또 신체적 장애가 있는 분들이 사용하는 청각화 장비도 html을 … 더 읽기
HTML 코딩 실습 환경 준비 – 생활코딩 HTML 코딩 실습 환경 준비 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 준비 강의에서는 atom editor로 진행하지만, 나는 vs code를 사용하기로 했다. 바탕화면에 web이라는 디렉터리를 만든다. 프로젝트에 사용할 파일은 이곳에 저장한다. 강의 목표 오픈 튜토리얼 html 강의의 목표는 아래와 같은 웹 페이지를 만드는 것이다. 강의에서 … 더 읽기
