본문 바로가기

HTML🔨/html9

html 변천사 html 변천사 1. 기존 html,css,js 로만 작업한 버전 단점- 사용자 환경에 일일히 대응할 수가 없다. 2. ejs (embededjs) js 안에 html를 템플릿을 만들어서 찍어낸다. 사용자 환경에 맞추어 일일히 만들어준다 (시간이 오래걸림) 3. spa (싱글페이지) html 하나와 js 파일을 뭉쳐서 넣어준다 js 파일안에 화면을 만드는것에 필요한것들이 들어가있다. 기존엔 클라이언트가 서버에 화면을요청하면 서버에서 하나하나 만들어서 응답함(ejs 버전) 하지만 spa 화면구동에 필요한 js 다 들어가있으므로 서버를 안거쳐도됨. 응답이 빠름 기존에 서버에서 만들었던 작업을 클라이언트로 넘김 단 문제점 '검색엔진' 네이버,다음,구글..... 사이트 검색시 내가 검색한 키워드에 맞춰 띄어줌 .. 2023. 9. 2.

dl, dt, dd 구조 (제목. 내용하나이상) dl 은 dt dd 가 한가지 이상씩 있을때만 dl, dt, dd 를 사용한다. 제목 > 내용구조일떄 dl 안 div 불가. dd, dt 안에 div 가능 넥슨게임즈 SEOUL 서울특별시 강남구 남부순환로 2621 디앤오 강남빌딩 5층 넥슨게임즈 PANGYO 경기 성남시 분당구 판교로 256번길 25 판교 테크노벨리 2022. 12. 15.

html h2 배경 이미지 정리 로고 html 총 제목느낌 / 서브페이지 제목 / 내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지에서 섹션별 내용에따라 여러번씩 사용할 수있음 컬럼제목 h3 h4는 없음 로고 html 총 제목 느낌 서브페이지 제목 서브내용이 하나이기에 위에 한번만 사용 / 나머지강조는 em, strong 메인페이지서는 섹션별 내용에따라 여러번씩 사용 가능 컬럼제목 섹션별 작은 제목 사용안함 안에 img 가능? button inline-block, img도 inlin-block 으로 가능하지만 block요소 불가능 브라우저마다 이미지와 버튼의 간격이 달라짐 버튼은 클릭으로 기능을 구형, 배경이미지로 버튼디자인에 맞춰 아이콘 크기 조정 = 자바.제이쿼리 기능구현할때 (toggle) 사용 f.. 2022. 11. 24.

html 네이버 지도 넣기 id 생성 2022. 11. 7.

html 상단 용어정리 " data-og-url="https://guide-page.dothome.co.kr/404.html" data-og-image="https://blog.kakaocdn.net/dna/Vn0Po/hyP74j9Cmm/AAAAAAAAAAAAAAAAAAAAAB_G7DeX8mqylZXl3dew7EXYaReL4wcsJEbLhkRPPauD/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1759244399&allow_ip=&allow_referer=&signature=Istq6FoNYjEO3XCrtMRLUvaesdU%3D target="_blank" data-source-url="http://hyojin7794.dothome.co.kr/subway/images/subway_og.png">"> 닷홈 | 페이지를 표시할 수 없습니다. 도메인 25% 할인쿠폰 제공 최대 할인가! 13,500원 닷홈 도메인 연결시 무제한 웹호스팅 무료제공 guide-page.dothome.co.kr 2022. 10. 12.

html mate 태그 description 태그란? 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용 태그란? 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용 인코딩 방식 파일의 형식 호환관련 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트 설정 웹페이지에대한 설명 정의 검색결과 오픈 그래프 2022. 10. 10.

html/css Open Graph 오픈그래프(미리보기) 오픈그래프란? 우리가 url을 전송됬을때 자동으로 나오는 이미지를 말한다! 페이스북에서 개발해서 페이스북 오픈그래프라도 불림 ---> url 전송시 미리보기 지원 html에 오픈그래프 코드 삽입 필요! 오픈그래프 설명 - 200~300px png로 제작 (보통 로고나 심볼 이용) 페이스북에서 개발한 오픈그래프 프로토콜 네이버 스마트에디터, 카카오톡에 url입력후 확인 (정식확인은 페이스북 개발자 센터 공유 디버거 페이지에서 정확한 확인가능) 오픈그래프 코드에러일시 수정해도 카카오톡은 반나절이상소요될수 있으며 공유디버거에서 반영되면 수정된것임 index아닐경우 오픈그래프 url에 파일명도넣어야함 태그 http://ossamuiux.com/subway/franchise_inquiry.html"> http:/.. 2022. 10. 6.

active 버튼 누르는 효과 active 는 활성이란 뜻 , 태그와 함께 사용되며 누르면 딸깍 같은 효과를 준다. KO KO EN JP html에서 클래스로 active를 넣어줬을때 딸깍이는 느낌이 나게 할 수 있다. (영상으로 담을 수 없어서 아슙,...) 2022. 9. 24.

html용어정리 문서의몸통 문서나 특정 섹션(section)의 헤더(header)를 정의 문서나 특정 섹션(section)의 헤더(header)를 정의 - 주메뉴를 감쌀때 사용 , , , , , : 문단의 제목, 숫자가 작을수록 크기가 커짐 로고 : 로고는 해달 사이트의 가장 큰 제목의 의미 navigation 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(메뉴,목차,인덱스) global navication bar 사이트전체에 동일적용되는 최상위 공통 네비게이션 (보통 상단에 위치 메인메뉴) division 가상의 레이아웃 나누기 무조건 제목태그 h 포함 태그에 쓰이는 id / class 이름 정리 id HTML 태그의 id 속성을 CSS 선택자로 지정할때 큰속성 지정 / 중복사용 불가능 css 에서 # 사용 cl.. 2022. 8. 28.

이전 1 다음

티스토리툴바