ON/HTML CSS

📢 영역을 나누는 형식 - block 형식 : 여러 행을 만드는 것으로 크기 지정(width,height) 사용 가능함 (p/pre(문단 나누기),h1 ~ h6(제목 영역 나누기) hr(수평선을 넣어서 화면 나누기), div(영역 나누기) - inline형식 : 여러 열을 만드는 것으로 크기 지정(width,height) 사용 불가능 strong/b(글자를 굵게), em/i(글자 기울기),mark(글자의 배경색), span(한 줄을 나누는 용도) 📢 src 속성 확인 - .. : 상위 폴더 - / : 아래, 안쪽, 안에 📢 radio와 checkbox : 여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type 묶음으로 다룰려는 input 태그들은 반드시 같은 name 속성 값을 가져야한다!..

웹은 크게 3요소 1. HTML : 웹 문서의 큰 틀(뼈대) 2. CSS : 스타일(색상,디자인,간격,배치 등등) 3. Javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야하는 동작 처리 📌 스크립트(script) 언어란 ? 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어 별도의 소스코드를 컴파일 하지 않고 인터프리터를 이용하여 소스코드를 한 줄씩 읽어 바로 실행 📌 자바스크립트 란 ? 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어 == 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어 -> 인터프리터 방식 : 코드를 한줄 한줄 씩 읽어가며 바로 실행하는 방식 ECMA Script 표준을 따르는 대표적인 웹 기술이다. 📌 자..

div.item.item${items$}*9 items1 items2 items3 items4 items5 items6 items7 items8 items9 div#shadow-test>p*4 ul#weigth-test>li{테스트$}*5 테스트1 테스트2 테스트3 테스트4 테스트5 ul#family-test1.cls

📌 레이아웃 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미 📌화면 배치 방법 display 속성 display : ; 에 원하는 속성 배치 block : 화면을 수직 분할(행을 나눔 / + width / height 속성 사용 가능) -> div inline : 화면을 수평 분할 (하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨 + width / height 속성 사용 불가) -> span inline-block : inline 수평 분할 + block 의 크기 조정 none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태 flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리 하는 형식 💡 inline은 크기가 조절이 불가하지만! inline-block를 이용해서 크..

📌특정 요소 내부에 있는 특정 클래스만 선택하기 ✅ HTML - 만일 자식2가 있다면 사용 못함 ! 1 2 3 4 5 6 7 8 9 10 11 12 ✅ CSS /* 특정 요소 내부에 있는 특정 클래스만 선택 */ /* #test4-1의 후손 중 클래스가 c4인 요소 선택 */ #test4-1 .c4{ background-color: darkmagenta; } /* #test4-2의 자식 클래스가 c4인 li요소만 선택 */ #test4-2 > li.c4{ background-color: darkturquoise; } ✅ 결과 📌 여러 선택자 동시 선택 ✅ HTML 테스트1 테스트2 테스트3 ✅ CSS /* 여러 선택자 동시 선택 */ #test5-1,#test5-2,#test5-3{ border: 1px..

📌 문자열 속성 선택자 속성 값의 문자열을 확인하여 스타일 적용하는 방식의 선택자 🔊 1) 선택자[속성명 ~= "특정값"] { CSS코드; } 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택 ✅ CSS 작성 div1 div2 div3 div4 ✅ HTML 작성 div[name ~= "aaa"]{ background-color: darkblue; } ✅ 결과화면 = name중 aaa가 들어가는 단어에 darkblue색상 넣기 🔊 2) 선택자[속성명 |= "특정값"]{ CSS 코드; } 속성값이 특정값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야한다. ✅ CSS 작성 div1 div2 div3 div4 ✅ H..

생성자 작성방법 작성상세 태그 태그명 태그명 { CSS코드 ; } 아이디 # # id속성값{css 코드;} 클래스 . . class속성값{ css코드; } 속성 [ ] 선택자[속성명 = "속성값"] { CSS 코드; } 자식 > 선택자1 > 선택자2 { CSS 코드; } 후손 ( ) 띄어쓰기 선택자1 선택자2 { CSS 코드; } 🔊 기본 속성 생성자 태그에 작성된 특정 속성을 선택하는 선택자 (id, class도 선택 가능 하지만 보통 #, .을 사용함) [작성법] 선택자[속성명 = "속성값"] { CSS 코드; } (참고) 1) 선택자는 생략할 수 있다. -> 특정 속성을 가진 모든 요소 선택1 2) "속성값" 양쪽의 쌍따옴표("")는 홑따옴표('')로 변경하거나 생략할 수 있다. ✅ CSS 작성 d..

📌CSS (Cascading Style Sheets) 마크업 언어(HTML)가 실제 화면에 표시되는 방법(모양, 색상, 크기, 스타일..)을 기술하는 언어 (HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어) W3C(웹 표준 지정 기관) 에서 CSS를 표준으로 지정함 태그 태그명 아이디 # 클래스 . 속성 [] 자식 > 후손 ( ) 띄어쓰기 🔊 CSS Selector(선택자) 현재 HTML 문서내에 같은 태그를 선택하는 선택자 [작성법] 태그명 { CSS코드 ; } ✅ CSS 작성 head에 작성 ✅ HTML 작성 body에 작성 strong 태그에 작성된 내용입니다. span 태그에 작성된 내용입니다. strong 태그에 작성된 내용 입니다. span 태그에 작성된 내용 입니다. ✅ 결과물 ..