table 태그에 대해 정리해보도록 하겠습니다 :) table 태그는 표 디자인할때 사용합니다. 테이블 태그를 작성해줍니다. table header를 지정해주고갑시당. table header 칸을 넣어주면 옆으로 나열되고 아래로는 줄바꿈을 못합니다. 연도 header 부분에 연도를 넣었습니다. 여기서 colspan 속성은 칸을 옆으로 병합시킬때 사용합니다. 병합 시킬 칸은 숫자값으로 기입해줍니다. 단위는 적지않습니다. 2023 칸병합완료 03.03 밑에 table data도 설정해줍니다 ( td태그 ) 여기서 rowspan 속성은 칸을 아래로 병합 시킬 때 사용합니다. colspan과 같이 숫자값으로 기입해줍니다. 화면을 확인하기전 앞서 알아보기 편하게 css도 설정해주고갑니다. * { margin:0;..

오늘은 form 태그에 대해 정리하겠습니다 :) form 태그는 사용자가 사이트 화면에서 입력한 데이터 [ 회원가입 , 로그인 , 검색창 , 게시글 ] 를 전송할 때 필요한 태그들 입니다. form 태그를 이용한다면 로그인 , 회원가입 화면을 구성할 수 있습니다 . 오늘 정리한 내용들만 가지고는 기능에 관련된 처리는 현재로 불가능합니다 [ 추후 정리 예정입니다 ! ] form 태그를 쓸때에는 method 메서드 속성을 같이 지정해줍니다. method 속성은 데이터를 전송할 때의 어떻게 전송을 할것인지 방식을 정할때 사용합니다. action 액션 속성은 입력한 데이터를 어떤 파일에 전송할건지 파일명을 기술할때 사용합니다 . 또한 maxlength = [ 최대글자수 ] , minlength = [ 최소글자수..

html 에서 video 태그를 사용할때에는 동영상 파일의 확장자는 .mp4 형식만 사용이 가능합니다. 동영상 변환프로그램을 사용해, 변환해서 사용도 가능합니다. 비디오태그를 준비해줍니다. 비디오태그를 제어하기위한 옵션들을 설정하는 속성 사용시 필요한 세팅들이 있습니다. video 태그에 자주 사용되는 속성 몇가지를 알아보겠습니당. controls -> 비디오를 제어하기 위한 하단에 등장하는 컨트롤 박스를 생성하는 속성 muted -> 영상을 음소거 상태로 만듭니다. autoplay -> 영상을 자동재생 loop -> 영상 무한반복 재생 비디오태그를 사용할때는 source 태그를 안에 넣고 src로 .mp4 파일을 연결해줍니다. 저는 음소거, 자동재생, 무한반복 속성을 넣었습니다. autoplay 속성을..

px -> pixel ( 고정 크기 단위 ) % -> 백분율 ( 상대적인 크기 단위 / 부모크기 기준으로 %가 반영됩니다 ) vw , vh -> 웹브라우저 화면에서 보이는 사이즈기준. em - 부모의 폰트사이즈 기준으로 배율(곱셈) 형태로 반영됨, 본인(자식태그) 에게 폰트사이즈가 지정돼있을 경우 해당 자식 태그 폰트사이즈가 기준이 됩니다. [ width, height, padding , margin, border 수치값으로 표현가능한 곳에서 사용 가능합니다 ] rem -> 최상위(root) 태그 () 폰트사이즈 기준으로 배율[곱셈] 형태로 반영이 됩니다. 모바일 화면을 꾸미는 반응형 웹에서 많이 사용됩니다.

오늘 알아볼 css 속성은 position 속성을 알아봅시다 :) position 속성은 태그의 위치를 지정하거나 이동할 때 사용하는 속성입니다. 이 속성은 원하는 위치로 이동하거나 다른 태그와 겹치는 디자인을 표현할 때 사용됩니다. position 속성을 사용하면 작성한 태그들은 겹쳐서 쌓이게 됩니다. 태그들의 겹치는 순서를 제어하기 위해 z-index 속성을 사용합니다. z-index는 숫자 값으로 표현되며, 숫자가 큰 선택자일수록 위에 쌓이는 특징이 있습니다. 이 속성은 형제 태그들 중에서 사용할 수 있습니다. position:absolute; -> 이 속성을 적용한 태그는 감싸고 있는 부모 태그(기준이 되는 포지션 속성이 있는 부모)의 공간 안에서 원하는 위치로 이동할 때 사용됩니다. 이 속성을 ..

오늘 알아볼 css 속성은 overflow 속성 입니다. overflow 속성은 부모 태그안에 잇는 자식태그(자식요소)가 부모의 공간을 초과하거나 벗어나게 됬을때 처리할 수 있는 속성입니다. overflow 소성은 자식태그가 벗어나게 된 부모태그에 적용해야합니다, 화면에 보여질 html 태그를 먼저 작성해봅시다. 자식요소1 자식요소2 저는 이렇게 태그를 작성했습니다. 알아보기 편하게 css도 같이 작성해줍시다. .box1 { width:500px; height:450px; background-color:pink; margin:0px auto; overflow: hidden;} box에 가로값, 높이값을 주고 컬러를 pink로 설정하고 가겟습니다. 앞서 말햇듯이 부모 태그에 overflow 속성을 주고 가..

오늘 알아볼 style 속성은 transition 속성 입니다. css값을 부드럽게 변화하고싶을 때 사용됩니다. - transition 속성 transition:

transform 속성에 대해 알아봅시다! 먼저 html 부터 작성하고 가겠습니다! 모양변화 회전 모양변화 확대, 축소 모양변화 위치이동 모양변화 기울기 저는 화면구상이 보기 편하게 css를 먼저 설정하고 가겠습니다 .test { display:flex; justify-content:center; } .center { width:500px; } .box1 { width:200px; height:200px; background-color:pink; color:#fff;} 가운데로 정렬된 예쁜 핑크컬러의 박스가 만들어졌습니다! 오늘 알아볼 transform의 여러 속성들을 알아봅시다 - transform 속성 1) rotate(단위는 deg) : 태그를 회전 할 때 사용합니다 2) scale(단위는 숫자값 ..

가상선택자 ::after ::before 가상선택자 after, before 속성에 대해 알아봅시다! 기본적으로 after, befor 속성에다가는 content:"" 속성을 적용해야 합니다 " "

배경관련 속성인 background 속성에 대해 알아봅시다 :) 작업하고자 할 태그에 뒷바탕 배경처럼 속성값을 깔아줄 때 사용되는 속성입니다. 먼저 html 과 css를 작성해줍니다. 블록요소1 블록요소2 인라인요소1 background 속성만 확인하면 되니 html 태그는 간단하게 작성해줍니다. .bg1 { border:1px solid black; background-image:url(img/bgSquare.png); width:700px; height:400px; padding:40px; background-repeat:no-repeat; background-position:right 50px top 20px; } .bg2 { background-color:yellow; width:150px; he..