1D

미디어쿼리 미디어쿼리 구문css 모듈인 미디어쿼리는 사이트에 접속하는 장치에 따라 특정한 css 스타일을 보여주는 방법이다. 미디어쿼리는 다양한 기기와 화면 크기에 대응하여 웹사이트를 효과적으로 표현할 수 있게 해준다. [기본형]@media only 또는 not 미디어유형 and (조건) and (조건){ 선택자 {속성:값}}· only - 미디어쿼리를 지원하지 않는 브라우저에서는 미디어쿼리를 무시하고 실행하지 않는다. · not - 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 not tv 라고 적으면 tv유형을 제외한다. *only 또는 not - 잘 쓰이지 않아 생략가능. · and - 조건을 여러 개 연결하여 추가하는 키워드(연산자)이다. *and (조건) and 앞 뒤에는 반드시 공백으..

3차원 속성 = 3d x, y, z축 border-radius 100%로 만든 정원에 radial gradation주면 공처럼 보임. 크기, 빛, 음영으로 입체효과 원근감을 주는 것. 2차원변형속성 : 색종이를 자른것과 같은 느낌프로그램에서 화면의 좌표는 x축과 y축을 사용한다. x좌표와 y좌표가 있는 화면을 우리는 2차원 화면좌표라고 하고 여기에 z축을 추가하면 3차원 좌표가 된다. z축은 브라우저에서 사용자 쪽으로 가까워질수록 z축의 양수이며, 멀어질 수록 음수이다. 2차원변환함수 2차원변환함수는 2d상태로 x축과 y축을 이용한다. transform속성의 속성값으로 사용된다. [종류]1. translate(X, Y) : 특정 크기만큼 이동한다.-translateX : X축으로 특정 크기만큼 이동..

더보기동영상은 background속성으로 제어할 수 없고, 비디오 태그가 있어야한다.비디오태그랑 아래 div 겹쳐야할경우메인비쥬얼 섹션에 position: relative ! absolute는 무조건 상위 요소의 0점을 찾아간다. static은 좌표를 인식할 수 없는 기본상태, 자식들한테 position을 줬을 때 부모를 기준으로 움직일 수 없다. 보통 부모태그한테 relative를 주고 자식요소한테 absolute를 준다.video태그랑 div태그 모두 absolute 줬을 때 섹션 태그의 0점에 온다.div text는 앞에, video는 뒤에 위치한다. z-index속성position이 적용된 박스끼리 겹쳐 있을 경우 어떤 태그가 더 앞에 나올지 결정하는 속성z-index속성은 값으로 단위 없이 숫자..

flex box layout = flexible box layout플렉스 박스 레이아웃은 웹 요소를 배치하기도 쉽지만 화면 너비에 따라 웹 요소의 크기를 자동으로 바꿀 수 있어 매우 편리하다. 그래서 반응형 웹을 만들 때 적합하다. 화면 크기가 달라지면 그에 맞춰 플렉스 항목(자식)을 늘리거나 줄일 수 있는 유연한 상자를 활용해 레이아웃을 만든다는 의미이다. 항목마다 크기를 조절하려면 4가지 속성을 플렉스 항목에 지정해야한다.flex속성❤❤❤1. flex-basis : 플렉스 항목(자식요소)의 기본 크기를 지정한다.2. flex-grow : 공간이 남으면 플렉스 항목을 늘린다.3. flex-shrink : 공간이 부족하면 플렉스 항목을 줄인다.4. flex: flex-basis, flex-grow, f..

👍 태그에 사용하는 공통속성들1. autocomplete : 자동완성 값을 on으로 명시하면 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값을 드롭다운해준다. 기본값은 off로 되어있다. 예시) 2. enctype : form에 사용자가 입력한 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방식을 명시한다. ·application/x-www-form-urlencoded : 기본값으로 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시한다.·multipart/form-data : 모든 문자들을 인코딩하지 않음을 명시한다. 이 방식은 form요소가 파일이나 이미지를 서버로 전송할 때 주로 사용한다. ·text/plain : 공백문자는 '+'기호로 변환하지만..

입력양식태그인터넷을 사용하다보면 사용자의 의견 제시나 중요한 정보를 전달받기 위해 회원가입, 로그인, 검색 등과 같은 다양한 정보를 입력할 수 있다. 이런 공간을 form(폼)이라고 부른다. 태그 블록속성, 일반태그, 사용자의 정보를 입력 받을 수 있는 양식 칸예) 아이디, 비밀번호를 입력할 수 있는 로그인 창이나 회원가입을 할 수 있는 양식, 검색창 [기본형] 다양한 입력 양식들... [속성]1. name= form의 이름을 지정한다. 한 문서 안에 여러 개의 form 태그가 있을 경우 form들을 구분하기 위해서 사용 한다.2. action= 서버 주소. 서버가 준비되지 않았을 경우 #(임시경로)를 사용한다. 퍼블리셔한테 공유를 안해주는 경우가 많다.3. method=입력받은 데이터를 서버로 보낼 때..

멀티미디어 태그inline-block속성인터넷 초기에는 웹 사이트에서 동영상을 보거나 음원을 듣기 위해서 PC를 통해서만 멀티미디어 파일들을 재생할 수 있었다. 그래서 여러가지 미디어 파일을 확인하려면 ActiveX를 설치해야만 했고, 이 과정에서 악성프로그램이 딸려오는 경우가 많아 이 문제를 해결하기 위해 만들어진 태그가 바로 멀티미디어 태그이다. 멀티미디어 태그의 종류로는 ,, 태그가 있다. 모두 src로 불러온다. 태그소리만 재생되는 음원파일을 말한다. 현재 브라우저에서는 .MP3, .WAV, .Ogg 확장자를 지원한다. [기본형]1. 오디오 파일을 1개만 연결하는 경우이 음원은 해당 브라우저에서 지원되지 않습니다.가운데는 안내문구를 쓰는 공간이다.2. 오디오 파일을 확장자별로 여러 개 연결하는 ..

html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>SplitShiretitle> link rel="stylesheet" href="./css/layout.css" /> head> body> div class="wrapper"> header> div class="con"> h1> a href="/"> img src="./img/Logo.png" alt="로고" /> a> ..

테이블(표)의 칸 합치기 row는 줄을 뜻해서 세로 줄을 뜻하고, col은 열을 뜻해서 가로.colspan과 rowspan속성 표를 만든 후 표의 행이나 열을 합칠 경우 colspan과 rowspan을 사용할 수 있다. 이 속성은 셀(칸)을 합치는 속성으로 칸을 만드는 th태그나 td태그에 적용할 수 있다. [기본형]1. 표의 가로 칸을 합칠 경우 2. 표의 세로 칸을 합칠 경우 table> figcaption>수업시간표 가을학기figcaption> tr> th>시간th> th>월th> th>화th> th>수th> th>목th> tr> tr> th>7:3..

2주 배웠는데 중급 중반까지 배웠다고 한다...이제 고급을 배운다고 한다...난 아직 왕초보인데........!!!!!!!가상요소 설명 추가 :-)가상요소는 해당 태그 안에꺼다.title ::before일 때 , ::before title 라고 생각하면 된다. 가상요소들은 전부 다 인라인 속성이라 display: block; 써줘야되고,content:" " 컨텐트 속성이 반드시 써있어야한다!아이콘 폰트를 쓸 때 컨텐트 속성에 유니코드를 넣으면 종모양, 로그인 아이콘 등등이 나온다. 예시 사이트 : fontawesome.com 에서 태그를 갖다 붙인다.그 이전에 코드들을 내 html에 연결해놔야 쓸 수 있다.코딩할 때 아이콘은 피그마에서 svg로 다운받아서 쓰는게 안전하다. #코딩숙제 Beyond Spa..