본문 바로가기
728x90
반응형
SMALL
[CSS] 하이퍼링크 스타일링 설정하는 법 📌 하이퍼링크 만들기 ⬇⬇⬇ https://coding-yesung.tistory.com/78 [HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! 1. 하이퍼링크란 ❓ 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 하이퍼링크는 웹을 웹 다워보이도록 만들어줌 링크에 사용할 문자 또는 이미지 ✅ 다음 홈페이지로 연결하는 coding-yesung.tistory.com 1. a:link 하이퍼링크가 연결되었을 때 선택 2. a:visited 특정 하이퍼링크를 방문한적이 있을 때 선택 3. a:hover 특정 요소에 마우스를 올렸을 때 선택 4. a:active 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택 파이썬 공식홈페이지 2023. 3. 30.
[CSS] 선택자의 종류 - 2️⃣ 자식 선택자, 자손 선택자, 형제 선택자, 속성 선택자, 가상 선택자 📌 HTML의 구조 알아보기 ⬇⬇⬇ https://coding-yesung.tistory.com/74 [HTML] HTML이란? & HTML 문서 만들기, HTML 스켈레톤 1. HTML(Hyper Text Markup Language) HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 것)기능을 가진 문서를 만드는 언어 [최초의 웹사이트] http://info.cern.ch/ http://info.cern.ch info.cern.ch 2. HTML 문서 만들 coding-yesung.tistory.com 1. 자식 선택자 부모의 요소 하위의 자식요소에 스타일을 적용 body > p { color: deeppink;} 2. 자손 선택자 조상 요소 하위의 모든 요소에 스타일을 적용 자손은 자식.. 2023. 3. 30.
[CSS] 선택자의 종류 - 1️⃣ 전체 선택자, 요소 선택자, id 선택자, class 선택자, 그룹 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 * { 속성명1: 속성값1; 속성명2: 속성값2; ...} 📍 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음! 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 2. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용함 span 요소 strong 요소 ins 요소 mark 요소 3. id 선택자 웹 문서만의 특정 부분 스타일을 적용 # 기호를 사용해서 id 속성을 가.. 2023. 3. 30.
[CSS] CSS란? & HTML에 CSS 적용하는 법 1. CSS(Cascading Style Sheets)란❓ 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 2. CSS 문법 HTML 문서 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 3-2. 내부 스타일 HTML 문서의 사이에 요소를.. 2023. 3. 30.
[HTML] 시맨틱 태그(Semantic Tag) 1. 시맨틱 태그(Semantic Tag)란❓ Semantic: 의미론적인 의미가 있는 태그를 사용 1-1. 시맨틱 태그의 장점 검색엔진 최적화 스크린 리더를 사용하여 페이지를 탐색할 때 도움 div>div>div>div .... 끝없는 div를 탐색하는 것보다 효율적 개발자에게 명확한 의미를 전달 1-2. 시맨틱 태그의 종류 🔖시맨틱 태그 종류 설명 - 페이지의 제목과 같은 소개 내용을 포함 - heading 태그나 로고, 검색양식, 작성자 이름 등을 포함 - 메뉴, 목차 등에 사용 - 지배적인 컨텐츠 영역을 나타내는 태그 - 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄 - 섹션에는 항상 제목이 있는 것이 일반적 - 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록.. 2023. 3. 28.
[HTML] HTML의 디스플레이 - inline, block, inline-block 1. inline 요소 content 크기 만큼만 자리를 차지하는 요소 width, height로 크기를 지정할 수 없음 padding, margin으로 좌우에만 여백을 지정할 수 있음 (위, 아래는 안됨) 여러개의 인라인 요소가 있을때, 수평으로 쌓임(옆으로) 보통 Text를 작성할 때 사용 인라인 요소의 종류: span, img 1-1. 태그 줄 단위로 영역이 설정 inline 특징을 가지고 있음 텍스트에 대한 스타일 속성을 줄 때 사용 2. block 요소 라인을 모두 차지하는 요소 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 width, height로 크기를 지정할 수 있음 padding, margin으로 상하좌우 여백을 지정할 수 있음 여러개의 블록 요소들이 있을때, .. 2023. 3. 28.
[HTML] form 태그와 여러가지 태그 - input, label, textarea, button 1. 폼(Form) 태그 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할때 사용되는 HTML의 태그 form 태그 안에 form 요소를 통해 데이터를 서버로 전달 1-1. 태그의 속성 입력 양식 전체를 감싸는 태그 form은 컨트롤 요소(control element)로 구성된다. Form 태그의 속성 설명 method 전송방식 선택 get: url에 데이터를 포함하여 전달 post: body에 데이터를 포함하여 전달 name form의 이름 서버로 제출된 폼 데이터(form .. 2023. 3. 27.
[HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기 1. 아이프레임이란❓ inline frame의 약자 웹사이트 안에 또 다른 웹사이트를 삽입 아이프레임 2. 하이퍼링크 아이프레임으로 열기 target 속성을 아이프레임 name과 똑같이 설정함 하이퍼링크 target 속성 알아보기 ⬇⬇⬇ 더보기 https://coding-yesung.tistory.com/78 [HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! 1. 하이퍼링크란 ❓ 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 하이퍼링크는 웹을 웹 다워보이도록 만들어줌 링크에 사용할 문자 또는 이미지 ✅ 다음 홈페이지로 연결하는 coding-yesung.tistory.com ✅ 같은 폴더 내 '하이퍼링크.html'을 아이프레임으로 열어보자. border은 점섬으로 하고 원하는 색상으로.. 2023. 3. 27.
[HTML] 테이블 만드는 법 - 테이블 속성 설정하기 1. 테이블 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성 로 시작하고 끝냄 로 행을 생성, 로 셀을 생성 1 2 3 : 셀의 제목, 가운데 정렬, 굵은 글씨 테이블 만들기2 KDT 수강생 리스트 2-5. 테이블 테두리, 셀의 테두리 테이블 만들기1 첫번째 셀 첫번째 셀 두번째 셀 테이블 만들기1 첫번째 셀 2-6. 셀 채우기 테이블 만들기2 KDT 수강생 리스트 이름 연락처 주소 김사과 010-1111-1111 서울시 서초구 양재동 반하나 010-2222-2222 서울시 강남구 역삼동 오렌지 010-3333-3333 서울시 동작구 사당동 📄 예제 HTML 2023. 3. 27.
[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 1. 책갈피 기능 페이지의 길이가 길 경우 페이지 상단에 목차 등을 만들어 페이지를 원하는 부분으로 이동시킬 수 있음 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정 2. 페이지 링크 설정하기 링크에 사용될 문자 또는 이미지 문자 또는 이미지 문자 또는 이미지 태그의 'href' 속성값을 '#'로 시작해야 함 여기서 '#' 뒤의 name은 이동하고자 하는 위치의 태그 name 값과 동일해야 함 이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동함 책갈피 목적지로 이동합니다! 도착지 위로 위로2 📄 작성한 HTML 파일 2023. 3. 27.
[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! 1. 하이퍼링크란 ❓ 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 하이퍼링크는 웹을 웹 다워보이도록 만들어줌 링크에 사용할 문자 또는 이미지 ✅ 다음 홈페이지로 연결하는 하이퍼링크를 만들어보자. 하이퍼링크 다음 홈페이지 ✅ 다음로고 이미지를 클릭하면 다음 홈페이지로 연결되도록 만들어보자. 하이퍼링크 다음 홈페이지 바로가기 ✅ HTML 문서와 같은 폴더 내 subpage.html을 작성하고 하이퍼링크로 연결시켜 이동해보자! 📄 subpage.html 서브페이지 하이퍼링크 서브페이지 ✅ 이미지를 클릭하면 하이퍼링크로 연결되도록 작성해보자. 하이퍼링크 서브페이지 2. target 속성 _blank: 새탭에서 해당 페이지가 열림 아이프레임의 name: 해당 아이프레임에서 열림 하이퍼링크 하이퍼링.. 2023. 3. 24.
[HTML] HTML의 태그 종류에 대해 알아보자🧐 1. HTML의 특수 태그 : > 띄어쓰기 : 2. 줄바꿈 태그 두 개가 같음 라이브 서버 확인해보기 🍀 3. 주석 : 한줄 또는 여러줄 주석 페이지 소스보기에는 출력되므로 중요한 정보는 적지 않는 것이 좋음! 4.문단 태그 ~ 문단을 나타내는 태그 블록 태그 한 줄을 모두 차지함 1. 문단 태그 문단을 만드는 태그 5. 제목 태그 ~ h1 ~ h6 까지 크기 블록 태그 검색엔진에서 제목으로 표현됨 중요한 정보를 씀 안녕하세요. 제목태그 h1 안녕하세요. 제목태그 h2 안녕하세요. 제목태그 h3 안녕하세요. 제목태그 h4 안녕하세요. 제목태그 h5 안녕하세요. 제목태그 h6 6. 서식 태그 글자를 꾸며주는 태그 : 텍스트를 굵게 표현 : 텍스트를 굵게 표현, 리더기에서 거쎈 발음 : 텍스트.. 2023. 3. 24.
728x90
반응형
LIST

티스토리툴바