HTML&CSS12 div 태그의 name 속성을 활용한 호버시 생성되는 툴팁 커스터마이징 □ div 태그 내의 name 속성을 부여 후 html 코드 작성 □ 기본 툴팁의 디자인 및 표시형식을 아래 코드를 활용하여 커스터마이징 진행 □ css 스타일은 html 파일 내의 스타일 태그를 생성하여 작성하였음 + TIP) html/css 색상참고 사이트 https://blog.naver.com/pjh445/220010107221 2024. 1. 4. CSS 사이즈(viewport 단위 등) □ 사이즈 단위 ○ px : 픽셀단위를 의미하며 해상도에 따라 크기가 상대적임 ○ % : 지정된 사이즈를 기반으로 상대적인 비율로 크기 지정 ○ em - 기본 지정한 사이즈를 기준으로 지정한 값의 배수만큼 크기 지정 - 중첩되며 자식에게 사이즈를 영향 줄 수 있음 ○ rem : 기본 지정한 사이즈만큼 동일하게 크기 지정 ○ viewport : 웹 브라우저에서 웹페이지가 표시되는 영역 의미 - vw : viewport 너비 100분율 기준 비율 - vh : viewport 높이 100분율 기준 비율 - vmin : viewport 너비/높이 중 최소크기 기준의 100분율 기준 비율 - vmax : viewport 너비/높이 중 최대크기 기준의 100분율 기준 비율 * 반응형 : 디스플레이 사이즈별 크기에 .. 2023. 11. 14. CSS(Casacading Style Sheets) □ CSS(Casacading Style Sheets) ○ 현재 사용되는 CSS는 2005년 CSS3로 정의됨 ○ 목적 - 디자인을 위한 것으로 문서를 어떻게 브라우저 상에 렌더링할지 표현 방법을 정의한 언어임 - HTML은 구조화에 집중(Semangtic Web 태그 기반, 의미표현 + HTML 태그로 표현) - CSS를 통해 화면 렌더링 표현방법을 정의 - JS(Javascript)로 사용자 인터페이스등 정의 ○ Selector - CSS Selector라고도 부름 - HTML 문서 특정 부분관련 렌더링 방법을 정의하기 위해 특정 부분을 선택해야함 - 위를 고려하여 CSS Selector를 사용하며 문법은 아래와 같음 /* HTML 태그에 CSS 적용 */ /* 방법① ex) p태그 css적용 */ .. 2023. 11. 14. 모던웹 접근성, 크로스 브라우징 등 □ 웹표준 : 월드와이트웹(www)의 측면을 서술하고 정의하는 공식기술규격 ○ W3C(World Wide Web Consortium) 권고안에 따라 정의된 웹 표준 ○ HTML 버전에 따라 태그 및 속성이 상이함(https://www.w3schools.com/tags/default.asp ) ○ 작성한 HTML 페이지가 표준에 부합하는지 확인 방법 → W3C validator에서 URL 또는 HTML 파일 업로드 후 검사 및 검토 ( https://validator.w3.org/#validate_by_uri ) □ 웹접근성 ○ 이미지 태그에 대체 텍스트 넣거나 청각 장애인을 위해 영상에 자막넣기 등 고려하여 웹 구현 ○ 키보드로 웹 인터페이스 접근 가능기능 등 고려하여 웹 구현 □ 크로스 브라우징 : 웹.. 2023. 11. 8. 시멘틱 웹(Semantic Web) 태그 □ 시멘틱 웹이란 웹페이지 각 영역에 의미를 부여하여 의미와 관련성을 기반으로 검색 또는 서비스가 가능하도록하는 방식을 의미 □ 시멘틱 웹 태그 ○ header : 헤더 ○ nav : 네비게이션 ○ aside : 좌 또는 우에 위치 ○ section : 본문 내용(article)을 포함하는 영역 ○ article : 본문 주내용 영역 ○ section : 본문 내용(article)을 포함하는 영역 ○ footer : 하단부 의미 2023. 11. 7. <form>,<input>태그 □ from 태그 : 사용자로부터 데이터를 입력받는 태그로 input 태그 등과 함께 사용 (참고링크 : https://j9in6.tistory.com/7) ○ 속성 - action : 사용자로부터 받은 데이터를 처리할 URL 정의 - method : 정의된 URL을 처리할 HTTP-method로 크게 2가지로 나눠짐 ① get 방식 : 서버에있는 데이터를 웹으로 끌고옴. 끌고오기에 덜 민감한 데이터 전송시 사용. ② post 방식 : 웹에서 데이터를 작성한것을 서버로 보냄. 민감한 데이터 전송시 사용 - target : URL 이동방법 ① _self : 현재 웹화면에서 생성 ② _blank : 다른 웹화면에서 생성 □ input 태그 : 데이터를 받는 주요태그로 주요속성은 아래와 같음 ○ 속성 - ty.. 2023. 11. 7. <div>, <table>태그 □ 태그는 division 약자로 html문서 중 특정부분을 지정할 때 사용 □ css, javascript로 특정부분을 효과를 적용할 때 사용 □ 태그는 표구현시 사용하는 태그이며, 작성시 아래 태그들을 활용해 표 작성 ○ thead : 컬럼명들이 위치할 부분이자 영역 ○ th : 컬럼명(값) ○ tbody : 행 또는 데이터 값들이 위치할 부분이자 영역 ○ tr : 행 영역 ○ td : 행과 열의 값 - 태그 사용시 영역확장 ※병합이 아닌 확장임 - colspan : 열 영역확장 (정수 숫자입력하여 확장) - rowspan : 행 영역확장 (정수 숫자입력하여 확장) ○ tfoot : 마지막 행이자 테이블의 마지막을 의미 테이블 편집(전) 필드1 필드2 필드3 필드4 필드5 1 2 3 4 5 6 7 8.. 2023. 11. 5. 리스트 : <ol>,<ul>,<li>태그 / img 태그 □ 리스트식으로 내용을 작성시 또는 태그에 태그를 사용함 □ 태그는 1번~2번과 같이 목차를 표시해줌 □ 태그는 ●와 같이 목차를 표시해줌 □ 각 또는 태그에 태그를 사용해줌 □ 형식으로 이미지를 가져옴 Hello h1 Hello h2 Hello h3 Hello h4 Hello h5 Hello h6 Hi 1 Hi 2 Hi 3 Hi 4 Hi 5 Hi 6 내 블로그 주소1 내 블로그 주소2 ol+li태그1 ol+li태그2 ol+li태그3 ul+li태그1 ul+li태그2 ul+li태그3 2023. 11. 5. <p>태그, <a>태그 □ 태그 : 문단 나눌시 사용 □ 태그 : 하이퍼링크 설정시 사용 ○ href : 하이퍼링크 ○ target : 지정된 하이퍼링크 - _self : 클릭시 해당 시트에서 전환 - _blank : 새로운 브라우저탭에서 생성 Hello h1 Hello h2 Hello h3 Hello h4 Hello h5 Hello h6 Hi 1 Hi 2 Hi 3 Hi 4 Hi 5 Hi 6 내 블로그 주소1 내 블로그 주소2 2023. 11. 5. 이전 1 2 다음
