HTML 4

[HTML] HTML5 레이아웃 종류 (태그로 범위 나누기)

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다. body 태그안에서 나누어진다고 보면 됩니다. HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. HTML 문서의 탐색 링크를 정의함. HTML 문서에서 섹션(section) 부분을 정의함. HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함. HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. 1. header HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지..

html-css 2021.10.13

모달창 안에 카카오 맵 불러오기 (동적 웹페이지 로딩)

모달창안에 다른 html파일로 구현해 둔, 카카오 맵 api를 이용한 페이지를 불러오려고 했다. 1. 첫시도 ( 동적 스크립트 에러) - jquery.load() 접근 방법 모달 창 안의 안에 map id로 접근해 jquery.load(url)함수로 flask url로 랜더링 시켜줄려고 했다. 모달 창은 웹페이지가 로딩될 때 미리 생성되고 보였다, 안 보였다가 하는 거라고 하길래 doucment.ready를 이용해 주었다. $(document).ready(function () { let id = {{ id }}; //get url 에 id값 전달 -> locate map rendering {#$('#map-body').load('/map?id='+id)#} }); 결과 error code : Failed..

JavaScript/JS TIL 2021.09.28

[FLEXBOX FROGGY] CSS 개구리 게임 1 (1~7)

1단계 - 오른쪽 정렬 justify-content : flex요소들을 가로선 상에서 정렬 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. (default) flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 2단계 - 가운데 정렬 3단계 - flex 주위 간격 설정 4단계 - 요소 간격 5단계 - 세로 정렬 align-items : flex 요소를 세로선 상에서 정렬 flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center:..

html-css 2021.08.09

[Html/CSS] html,CSS 초간단 기초 문법 1 (인라인,블럭 태그 / 리스트 태그 / Css 선택자(부모,자식 선택자) / border)

HTML 1. Inline/Block 태그 차이점 1) 블럭 태그 (div) 블럭태그는 한줄 전체를 사용(블럭단위) 2) 인라인 태그 (span) 인라인 태그는 요소의 부분만 사용 ( 옆에 공간이 있으면 이어서 위치) div1 div1 div1 span1 span2 span3 2. 목록, 리스트 태그 ul 태그 ul태그는 순서가 없는 리스트 태그입니다. 요소에 속하는 각 아이템은 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다. 아메리카노 카페라떼 핫초코 차 녹차 홍차 자스민차 ul 태그 점 없애기 리스트로 구역을 나누고 싶지만, 리스트가 아닌척 하고 싶을 때, 저 점을 없애면 됩니다. css - list 스타일 바..

html-css 2021.08.06
반응형