![]()
📌 레이아웃 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미 📌화면 배치 방법 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 태그에 작성된 내용 입니다. ✅ 결과물 ..
📌이미지 관련 태그 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그 1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹 주소) [ src 속성 확인 ] 상대경로 : 현재 위치를 기준으로 경로 지정 .. : 상위 폴더 / : 아래, 안쪽, 안에 2) width / height : 이미지의 크기를 지정하는 속성 [width,heigth 속성을 이용한 크기 조절(고정/가변 크기)] 고정 크기 단위 (px) : 화면의 크기 상관없이 지정된 값의 크기를 갖는 단위 가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따라 크기가 변경되는 단위 3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시 [ ALT 속성 확인 ] 📌하이퍼링크 관련 태그..
📌 기본 세팅 -- 현재 문서 형식 지정 -- html 문서의 내용을 정의하는 태그 -- html 문서를 정의하는 태그 현재 문자 형식이 UTF-8로 되어 있음을 선언 title에 문서 제목 작성 -- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그 📌 글씨 관련 태그 ------------------------------------------------------------------------------------------ 글자 관련 기타 태그 b 태그 : 단순히 글자를 굵게 표시하는 태그 strong 태그 : 글자를 강조하는 태그 (웹접근성) i 태그 : 단순히 글자를 기울이는 태그 em 태그 : 글자를 강조하는 태그 (웹접근성) mark 태그 : 형관펜 효과를 나타내는 태그..
분류 용도 명령어 DQL 데이터 검색 SELECT DML 데이터 조작 추가 삭제 수정 INSERT, UPDATE, DELETE DDL 데이터 정의 데이터 키우거나 줄이거나 컬럼 이름을 바꾸는 것 CREATE, DROP, ALTER DCL 데이터 제어 권한을 주는 것 GRANT, REVOKE TCL 트랙젝션 제어 COMMIT, ROLLBACK 📌 DQL 데이터 검색 (조회) [SELECT 컬럼명 FROM 테이블] 📌 DML 1) INSERT (데이터 추가) INSERT INTO 테이블명 VALUES(데이터,데이터,...) 📝 테이블에 모든 컬럼에 대한 값을 INSERT 할때 사용 INSERT 하고자 하는 컬럼이 모든 컬럼인 경우 컬럼명 생략 가능 단, 컬럼의 순서를 지켜서 VALUES에 값을 기입해야함 I..
