안녕하세요~ totally 개발자입니다. 오늘은 HTML과 CSS를 활용해서 Grid를 적용해보는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 grid를 형성하는 방법에 대해 살펴보겠습니다. 여기에서는 쉬운 예제를 위해 inline CSS로 진행했습니다. 아래 코드처럼 container 클래스의 div 태그와 그 안에 product 클래스의 제품 6개 div 태그들을 넣어주었고 9번째부터 19번째 줄까지 CSS 코드를 작성해주었습니다. 여기에서 중요하게 적용해야 하는 CSS는 아래 표로 정리했습니다. display flex, grid, inline, block 등 속성을 가지고 있으며 flex와 grid의 차이는 flex는 1차원, grid는 2차원으로 flex는 세로 또는 가로 방향 한 방향만 ..

안녕하세요~ totally 개발자입니다. 오늘은 iframe 태그에 대해서 알아보도록 하겠습니다. iframe 태그는 쉽게 말해 웹페이지 안에 다른 웹페이지를 넣는 것을 이야기합니다. 많이 쓰이는 예시가 유튜브 영상, 구글 지도 삽입입니다. 이 iframe 태그로 지도를 넣는 방법은 아래처럼 구글 맵스에서 장소를 검색하고 아래 Share (공유) 버튼을 누르고 Embed a map에 가서 COPY HTML 버튼을 누르시면 됩니다. 위 이미지에 10번째 줄처럼 붙여넣기만 해주시면 됩니다. 그러면 지도가 바로 출력된 것을 확인해볼 수 있습니다. 하지만 요즘에는 iframe 태그가 XSS(Cross Site Scripting) 즉 다른 도메인에서 스크립트를 실행하는 행위 등 여러 이슈가 발생할 수 있기 때문에..

안녕하세요~ totally 개발자입니다. 오늘은 태그와 셀 병합하는 방법에 대해 살펴보겠습니다. 아래처럼 3x3 3행3열의 테이블이 있다고 가정합니다. 1 2 3 4 5 6 7 8 9 테이블을 이렇게만 구성한다면 위 방법만 알고 계셔도 충분하지만 데이터를 출력할 때 row(행)끼리, column(열)끼리 병합하는 경우가 빈번합니다. 이런 경우, rowspan과 colspan 속성을 사용해주셔야 합니다. 아래 예제를 통해 1,4,7의 row(행)를 병합하는 방법과 5,6의 column(열)을 병합해보는 실습을 해보도록 하겠습니다. 1 2 3 4 5 6 rowspan과 colspan의 원리는 간단하지만 처음에는 헷갈릴 수 있기 때문에 다양한 예제를 통한 실습이 중요합니다. 핵심적으로 알아두실 것은 병합이 시..

안녕하세요~ totally 개발자입니다. 오늘은 자주 사용하는 HTML의 태그들을 살펴보도록 하겠습니다. 태그명 사용 목적 참고 사항 하이퍼링크 지정 target="_blank" 속성을 사용하여 새 탭에서 열 수 있는 옵션을 지정 가능 버튼 만들기 onclick 등의 속성 사용하여 함수 지정 가능 문서의 섹션을 지정 (컨테이너 공간을 만든다고 생각하시면 됩니다) 이미지 삽입 alt 속성을 사용하여 이미지가 출력되지 않을 때 대체 텍스트로 표시 가능합니다. 리스트 아이템 생성 또는 로 감싸줍니다. 네비게이션(메뉴) 링크 Ordered List의 약자(순서 리스트) Unordered List의 약자(순서 미지정 리스트) Client-side 스크립트를 지정 문서의 섹션을 지정 div는 박스 컨테이너 개념, ..