▶ flex 방식 display: flex - 자신은 블록속성을 유지하면서 자식요소에 flex 환경 설정 inlinne-flex - 자신을 인라인 속성으로 변경하면서 자식요소에 flex 환경 설정 flex-direction: row - flex의 기본축을 가로로 지정 column - flex의 기본축을 세로로 지정 row-reverse - 자식요소의 콘텐츠를 가로 역순으로 정렬 column-reverse - 자식요소의 콘텐츠를 세로 역순으로 정렬 flex-wrap: nowrap - 자식 요소의 가로사이즈가 줄어들고 줄바꿈을 하지 않음 wrap - 자식 요소의 가로사이즈를 유지하며 줄바꿈을 함 (반응형제작시 필수) flex-flow: flex-direction과 flex-wrap 속성의 축약문 (flex-..

▶ 요소 선택하기 document.querySelector(); ▶ 변수 만드는 방법 const 변수명 = document.querySelector(); - const: 절대 변하지 않는 값일 때 - let: 값이 변하는 변수일 때 ▶ for 반복문 for(let item of items){ 반복실행할 구문 } for(let "반복하는 요소가 담길 변수") of "반복시킬 그룹"{ 반복실행할 구문 } for(let i=0; i{ 실행될 구문 }); - 자주 쓰이는 이벤트 종류 : 'click', 'mouseenter', 'mouseleave' ▶ 문자 안에 변수 삽입하기 `문자.. ${변수명} 문자..` 백틱(``)으로 텍스트를 감싸고 변수부분은 ${변수}로 감싸준다. ▶ 조건문 if(조건문){ 조건문이..

SASS: 코드 입력시 중괄호 생략 SCSS: 코드 입력시 중괄호 입력 SCSS 문법으로 작성된 코드를 실시간으로 일반 CSS파일로 변환 - HTML파일은 CSS파일밖에 인식을 못함 SCSS파일 분리하기 1 분리할 SCSS구문을 _파일명.scss로 분리 2 style.scss파일에 @import '파일명.scss'; 로 연결 변수 - 자주 변경될만한 값을 특정 공간에 저장해서 해당 값을 필요한 곳에 재활용할 때 사용 ($변수이름:값 | $fontSize:20px) nesting - HTML 중첩 구조와 동일하게 SCSS구문을 변경 sass --watch -E utf-8 scss/파일명.scss:css/파일명.css @mixin / @include - 자주 쓰는 구문들을 패키지 형태로 묶어놓은 형태 - 인..

transform-origin : 50% 50% (기본값) x축, y축 변환 중심축 설정 좌우버튼예제 https://codepen.io/suyeon-hong-the-vuer/pen/YzVJxoQ YzVJxoQ ... codepen.io transform-style : 변환이 자신에게 적용될지 자손에게도 적용될지 설정 preserve-3d - 자손의 3차원 속성을 유지 backface-visibility : visible / hidden (3d로 돌렸을 때 뒷면이 보일지, 안보일지 설정) perspective : 원근감, 보통 400px ~ 2000px 사이로 적용 (부모요소에 적용) 굴러가는 주사위 https://codepen.io/suyeon-hong-the-vuer/pen/jOmeayM transfo..

form요소는 사용자 입력을 위한 요소로 사용자로부터 정보를 수집하는 역할을 한다 action - 정보를 건네받는 곳을 지정 method - 해당 정보가 전송되는 방식 (get/post) type - 입력 태그의 유형 value - 입력 태그의 초기화값 또는 사용자가 입력한 값 name - 입력 태그의 이름, 서버로 전달될 때 이름에 값을 붙여서 전송 1 2 3 form>fieldset>legend - table태그의 설명태그인 caption태그와 비슷한 form태그의 설명태그 정보 회원가입폼 이름 비밀번호 취미 독서 영화보기 성별 남성 여성 체크박스와 글을 연결해주기 위해 로 글 묶어주기, input에 value값 설정 - 웹접근성, 스크린리더기로 읽어주기위함 로 연결해줄경우 글을 클릭해도 input입..

table은 기본적으로 줄(row)와 행(colum)으로 구성되어 있음 테이블 요소 태그 - tr th td 셀병합 1. 가로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 colspan="합쳐지는 칸수" 2. 세로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 rowspan="합쳐지는 칸수" 3. 가로, 세로칸 모두 합칠 때는 합쳐지는 가로, 세로 칸 모두 삭제 후 시작칸에 rowspan, colspan을 모두 적용 thead - 테이블의 행 그룹 중 제목 셀그룹 테이블 내에 한 번 사용 tbody - 테이블의 본문 행 tfoot - 레코드 내용의 소계, 합계 등 정보에 해당하는 푸터 행 테이블 내에 한 번 사용 thead를 이용하면 테이블의 본문이 긴 상태에서 출력할 때 제목 셀그룹을 반복적으로 출력..