반응형 🌈 웹 퍼블리싱19 HTML_기본코드 HTML : 뼈대 제목1 제목2 제목3 제목4 제목5 제목6 문장 가볍게 쓰는 용도 강조 중요 ●순서 없는 목록 ●순서 없는 목록2 ●순서 없는 목록3 1.순서 있는 목록 2.순서 있는 목록 3.순서 있는 목록 티스토리 링크 url 새창 티스토리 //이미지 //상위폴더로 간후 경로찾기 .. //입력창 //비활성화된 텍스트 입력창 html에 특수문자 사용하기 https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references 2023. 12. 22. CSS_기본 작성방법 CSS : 피부 css 적용방법 -파일연결 -직접작성 body { //글씨 color: red; font-size: 10px; line-height: 2; letter-spacing: 1px; text-shadow: 3px 3px 1px black; text-align: center; font-family: placeholder //박스 background-color : grey; width: 500px; margin: 0 auto; //중앙정렬 padding: 0 20px 20px 20px; border: 5px solid black; //테두리 //위치 display: block; } p, li, h1 { color: red; } 2023. 12. 22. HTML_벡터그래픽 SVG 사용 웹에서 사용하는 이미지는 용량이 줄여 성능을 높여야하기 때문에 svg 를 사용한다 벡터 그래픽 표현을 위한 xml 마크업 언어 아이콘, 로고, 상표, 그림 , 도표 , 차트 , 다이어그램 , 지도 , 약도 같은 인포그래픽에 사용 https://uiweb.tistory.com/82 2023. 12. 22. CSS_이미지 스프라이트 여러개의 이미지를 하나의 이미지로 읽어 적용한다 https://www.toptal.com/developers/css/sprite-generator/ 참고 https://velog.io/@mooongs/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%8A%A4%ED%94%84%EB%9D%BC%EC%9D%B4%ED%8A%B8-%EA%B8%B0%EB%B2%95 2023. 12. 22. HTML_반응형 웹 (1) 반응형 웹 디바이스 해상도에 맞춰 자동으로 레이아웃이 변하여 화면이 조절되는것 -width, padding , margin을 가변성있게 제작한다 (% calc() vw vh 단위사용 ) -flex , grid 사용 - 미디어 쿼리 사용 (2) 적응형 웹 pc와 모바일이 각각의 사이트 주소를 가지고 분리되어있는 경우 레이아웃이 복잡하거나 앱이 따로 있을경우에 사용한다 [2] 반응형 웹 적용하기 (1) @media 스마트폰 세로 ~480px 스마트폰 가로 , 태블릿 : 481~768px 태블릿 가로 , 노트북 : 769px ~1279px 데스크탑 1280px ~ /* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ @media all and (min-width:1024px) and .. 2023. 12. 20. CSS_웹호환성 + 크로스 브라우징 [1] 웹 호환성 (1) 웹 호환성 웹 브라우저 버전, 종류와 관계없이 호환하게 웹사이트 접근이 가능한 것 크롬 , 파이어폭스, 사파리 , 오페라 등 (2) 크로스 브라우징 브라우저에 맞는 웹페이지 만들기 [2] 크로스 브라우징 해결방법 (1) 기본설정 문서 호환성 설정 뷰포트 설정 (디바이스해상도) 문자 인코딩 설정 (2) CSS Reset 브라우저마다 다르게 적용되는 CSS를 초기화시켜 기본 CSS 스타일을 설정한다 reset.css 나 normalize.css를 사용하자 https://blog.naver.com/mar1101/221006027889 코딩 16. 웹페이지 제작 초기 시작 단계 16.웹페이지 제작 초기 시작 단계 ①normalize 초기화 적용 https://necolas.github... 2023. 12. 20. HTML_웹표준 + 시멘틱 요소 [1] 웹표준 (1) 웹표준 크로스 브라우징에 맞춰 W3C 표준화 기구에 정의해준 명세에 맞게 마크업하는 것 - HTML (구조) , CSS (레이아웃,디자인) 의 분리 - 시멘틱요소 사용 - 대체 텍스트 사용 [2] 시멘틱 HTML (1) 정의 웹페이지의 레이아웃의 의미를 가진 요소이다 시멘틱 요소로 구성하면 검색엔진은 시맨틱요소를 중요한 키워드로 고려하여 적용하므로 검색결과에 영향을 미친다 시멘틱 요소 미사용시 div 태그로만 구분이 어렵기 때문에 시멘틱요소를 통해 구분이 용이하다 시멘틱 요소 사용시 화면구조에 대한 정보 전달이 가능하다 (2) 시멘틱 구성 header 사이트의 제목, 상단바 , 검색창 nav 메뉴 , 목차 , 네비게이션 바 main 메인 콘텐츠 aside 사이드바 , 광고바 sect.. 2023. 12. 20. HTML_웹 접근성 [1] 웹 접근성 (1) 웹 접근성 장애인, 비장애인 이용자, pc 등 장비에 관계없이 이용할수 있는 웹 정보를 구성하는 것 [2] 웹 접근성 적용 방법 (1) alt 적절한 텍스트 명시 title은 참고의 의미로 alt 대신 사용하지 않는다. (2) 콘텐츠 명도 대비 명도대비 4.5 : 1 명도대비 3:1 명도대비 점검 사이트 https://webaim.org/resources/contrastchecker/ WebAIM: Contrast Checker Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump qui.. 2023. 12. 20. CSS_웹 컬러 CSS 컬러 글씨 색깔 등 컬러 사용할때 참고할수 있는 tool https://developer.mozilla.org/ko/docs/Web/CSS/CSS_colors/Color_picker_tool Color picker tool - CSS: Cascading Style Sheets | MDN 이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. 또한 HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 CSS 에서 지원하는 다양한 developer.mozilla.org 2023. 12. 19. CSS_웹 폰트 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2023. 12. 19. 이전 1 2 다음 반응형
