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) 태그 () 폰트사이즈 기준으로 배율[곱셈] 형태로 반영이 됩니다. 모바일 화면을 꾸미는 반응형 웹에서 많이 사용됩니다.

본인은 포트폴리오를 준비하면서 웹퍼블리셔와 프론트엔드 개발 과정을 국비수업으로 수강하고 있습니다. 두번째로 제작한 벤치마킹 사이트는 복나비 소성희 한복 쇼핑몰 사이트입니다 이미 제작된 홈페이지가 있는 사이트였고, 벤치마킹 해야겠다! 라고 고른 이유는 생각보다 좀 단순...합니다 포트폴리오 작업할 시기에 가족의 결혼식이있엇고.. 부모님 혼주 한복을 보다가 한복사이트도 한번 만들어 볼까? 라는 마음 50%... 에 처음 컨셉 주제를 잡은 우리나라것, 전통적인것에 주제가 적합하다고 생각해서 만들어보았습니다 만드는 내내 재밌게 작업했던거같아요. ( 사진들이 너무 예뻣음 ) https://boggnabi.com/ 복나비 소성희 한복 프리미엄 디자이너 한복브랜드 복나비한복입니다. 결혼한복, 웨딩한복, 혼주한복, 아..

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

본인은 포트폴리오를 준비하면서 웹퍼블리셔와 프론트엔드 개발 과정을 국비수업으로 수강하고 있습니다. 처음으로 제작한 사이트는 경복궁 문화재청 사이트였습니다. 그 사이트 자체도 이미 제작된 상태여서 전체적인 디자인 구성과 레이아웃은 그대로 따라가기로 했습니다. 그러나 제작 과정에서 어떤 부분을 바꿔볼까 하는 생각이 들어서 특정 섹션들에 대해 자체적으로 디자인을 변경하고 화면을 구현했습니다. (기존사이트 주소) https://www.royalpalace.go.kr/ 문화재청 경복궁 www.royalpalace.go.kr 문화재청 경복궁 사이트에서는 전체적인 구조나 레이아웃을 크게 변경하지 않았습니다. 그러나 세부적인 디테일 부분에는 약간의 변화를 주었습니다. 포트폴리오용 페이지이므로, 저는 제가 직접 구현할 ..

본인은 포트폴리오를 준비하면서 웹퍼블리셔와 프론트엔드 개발 과정을 국비수업으로 수강하고 있습니다. 이 과정은 2023년 2월 9일부터 시작하여 2023년 7월 20일까지 총 6개월 진행됩니다. 웹사이트 제작 및 개발에 대해 전혀 경험이 없는 상태에서 이 수업을 처음 시작했기 때문에 처음에는 자신감에 의문을 가졌습니다. 하지만 지금은 훈련의 막바지에 접어들어 포트폴리오를 제작하는 단계에 도달했습니다. 포트폴리오 주제를 정하기 위해 많은 고민을 했습니다. 처음 포트폴리오 페이지부터 구상을 시작하여 각 섹션마다 다른 주제로 화면을 구성하려고 했습니다. 첫 번째 섹션에서는 우리나라의 전통적인 요소들을 주제로 구상했었는데, 자체적으로 디자인을 생각하고 화면을 구현하려니 창의적인 면에서 막히는 부분이 많았습니다. ..

오늘 알아볼 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: