반응형 ⭐ 코딩 기초/HTML, CSS23 📌 CSS 연결 선택자 정리! 하위 선택자 : 모든 하위요소에 스타일 적용 상위요소 하위요소 지정한 모든 하위 요소에 스타일 적용하기. 자손 선택자 자식 뿐만이 아니라 손자, 손자의 손자까지 모두 적용된다 자식 선택자 : 직계 자식 요소에만 스타일 적용 상위요소>하위요소 직계 자식 요소에게만 적용 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용 요소 1+요소 2 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소 가장 첫 번째 동생 요소에만 스타일이 적용 형제 선택자 : 모든 형제 요소에 스타일 적용 요소 1~요소 2 모든 형제 요소에 적용됨 예시 📥입력 다음은 제 자기소개입니다! 할 줄 아는 언어 파이썬 자바스크립트 SQL 운영중인 블로그 주제 디스코드 프로그래밍 학습과 교육 퍼즐 게임 📤출력 위와 같은 예시가.. 2022. 9. 21. 📌 CSS의 기본적인 주요 선택자! CSS 선택자는 스타일을 적용시킬 대상을 선택한다. 선택자는 섞어서 이용할 수 있다. 전체 선택자 : * * { margin : 0 0 0 0; padding : 0 0 0 0; } 문서의 여백이나 글꼴 크기 등 기본 스타일링을 초기화 할 때 🐍 주로 바깥 여백 마진(margin), 안쪽 여백 패딩(padding) 초기화시 사용 태그 선택자 : 태그명 h1 { font-weight: 300; font-size: 2.125em; color: #fff; } 특정 태그에만 적용시킴 class 선택자 : .class명 .class-name { font-weight: 300; font-size: 2.125em; color: #fff; } html 태그에서 방식으로 속성으로 설정 이 후 CSS에서 .클래스-이름 으.. 2022. 9. 21. 🎨 CSS 적용 방법 3가지! CSS 적용 방법 3가지 : 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 스타일 적용 순서 : 인라인 > 내부 > 외부 내부 스타일 시트 ... head 안 style 태그 안에 담김 외부 스타일 시트 외부에 css 파일을 만들어두고 불러옴 불러올 때는 head 안 link 태그를 이용함 가장 많이 사용하는 방식 인라인 스타일 시트 내가 보려고 정리하는 프로그래밍 간단한 스타일을 적용시킬 때 사용 문서가 복잡해지기 때문에 권장하지는 않는다. 🐍 테일윈드(Tailwind) 이용 방식 테일윈드 이용하기! 엄밀히 말해서는 Tailwind라는 외부 스타일 시트를 불러온 후 적용하는 방식 각 스타일 설정마다 클래스가 정해져 있어, 클래스 명으로 적용할 스타일을 입력하면 인라인 스타일처럼 이용 가능하다. 2022. 9. 21. 🎨 CSS 기본 개념, 문법 구조 초간단 요약! CSS란? 약어 설명 Cascading Style Sheet의 약자 Cascading : 폭포처럼 떨어져 내리는 특성(상속)을 지닌 Style Sheet : 스타일 관련 데이터가 나열된, 열거된 공간 사용 CSS는 색상이나 크기, 위치, 배열 방법등 디자인 요소를 담당 크게 문서의 레이아웃과 스타일 정의 js와 연계해 동적인 컨텐츠 표현이나 디자인 적용 가능 버전 CSS 1.0부터 CSS 4.0까지(현재) 버전 큰 의미 없다. 자동으로 브라우저에 최신 버전으로 제공 🐍 그러니 어떤 스타일 표준이 만들어지고, 그걸로 뭘 할 수 있는지만 알기, 브라우저 호환성 확인 CSS 기본 문법 CSS 구문은 선택자(Selector)와 선언부(Declaration)으로 구분 선택자 : 디자인을 적용할 HTML 요소를 선.. 2022. 9. 21. 🖼️ 이미지와 링크를 다는 HTML 태그들! ⭐ HTML에서 이미지 달기 img 태그 기본 img 태그를 이용하여 이미지를 단다 src 속성에 이미지 경로를 입력한다. 서버에서 불러오거나 아님 웹에서 불러오거나? alt 속성으로 대체 텍스트를 입력해준다. 구글 SEO나 웹 접근성을 위해 필요하다. - 이미지에 설명 붙이기 설명 표에서 하던 것과 똑같다! figure 태그로 감싼 후 figcaption 태그 안에 설명을 적는다. ⭐ HTML에서 링크 달기 a 태그 기본 텍스트 a 태그로 링크나 이미지를 감싸 링크로 만든다. href는 hypertext reference의 약자, 링크할 주소를 넣는다. 속성의 종류 속성 이름 뜻 href 링크한 문서나 사이트의 주소를 입력한다 target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정한다 d.. 2022. 9. 20. 📝 표를 만드는 HTML 태그들! 표를 만드는 태그 의 기본 구조 📥입력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 📤출력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 는 , , 으로 구성되어 있다. 그리고 로 행(row)마다 묶어져 있으며, 안에는 제목(head)인 , 내용(data)인 가 들어갈 수 있다. HTML 표에 추가할 수 있는 속성 colspan, rowspan : 행 합치기, 열 합치기 📥입력 합친 행 //rowspan="합치고 싶은 셀 갯수" 내용 내용 내용 내용 내용 합친 열 //colspan="합치고 싶은 셀 갯수" 📤출력 합친 행 내용 내용 내용 내용 내용 합친 열 rowspan rowspan은 각 행에서 같은 위치에 있는 셀끼리 합.. 2022. 9. 20. 이전 1 2 3 4 다음 반응형
