코딩

flex-basis란? - 플렉스 아이템의 초기 크기를 지정한다. * box-sizing을 따로 지정하지않는다면 콘텐츠 박스의 크기를 변경한다. div의 텍스트의 길이가 다르기 때문에 width이 다른 걸 볼 수 있다. flex-grow : 부모 요소가 flexbox 일때, 그 안에 속한 flex 아이템들이 기본 크기 보다 더 커질수 있는지 결정하고, 플렉스 박스 내부에서 할당 받을 수 있는 공간을 상대적으로 정의하는 속성이다. 쉬운 말로 flwx-grow::1를 하면 width가 다 꽉차면서 각 요소의 값들이 늘어난다. * 남은 공간이 있을 때만 사용이 가능하다. 만약에 1을 준다면 1 : 1 :1 로 크기를 나눠갖게 된다.  이떄! flex-basis가 0이 되면 동일한 크기를 줄 수 있다.  첫번쨰..

글자 하나씩 보이는 효과 메뉴별로 클릭시 분류, 해당 사진으로 이동시 해당 설명, 사진 클릭시 사진 확대와 취소버튼 일정 시간후 슬라이드 이동, 클릭 시 해당 슬라이드로 이동 kerry-portfolio jiho Home About Portfolio people Contact WELCOMEI'm a future developer. My dream is front-end, and I want to go further and become a developer who knows how to do back-end. DOWNLOAD CV 아래보기 About Me Hello! I'M JiHo Seo . I am a student at Induk University Department of Computer Softw..

피그마 사이트 https://www.figma.com/files/recent?fuid=1179654853655885167 Figma www.figma.com

참고 영상 https://youtu.be/MjmUpXhaqRM 완성작 코드 html 검색 HOME ABOUT SERVICE CONTACT 크리스마스 흰 눈 사이로 썰매를 타고 달리는 기분 상쾌도 하다 크리스마스 일자 12.25 크리스마스날 커플 탄생 150명 크리스마스날 우는 사람 10000명 크리마스날 날씨 ac_unit 크리스마스 데이트 TOP 3 둘이서 떠나요:) 명동성당 화려하게 빛나는 힐링 장소 노래듣기 여의도 더현대서울 크리스마스마켓 인생샷 건지는 핫플 보러가기 광화문 서울빛롱축제 화려한 빛 조형물를 손잡고 걷기 보러가기 MUSIC All I Want for Christmas Is You Mariah Carey 2019.11.01 미국의 싱어송라이터인 머라이어 캐리의 노래입니다. 1994년 1..

html menu DAILY UI search Most Popular Movies 명량 128min 2014 극한직업 111min 2019 신과 함께 139min 2017 국제시장 126min 2014 명량 128min 2014 1597년 임진왜란 6년, 오랜 전쟁으로 인해 혼란이 극에 달한 조선. 무서운 속도로 한양으로 북상하는 왜군에 의해 국가존망의 위기에 처하자 누명을 쓰고 파면 당했던 이순신 장군(최민식)이 삼도수군통제사로 재임명된다. 하지만 그에게 남은 건 전의를 상실한 병사와 두려움에 가득 찬 백성, 그리고 12척의 배 뿐. 마지막 희망이었던 거북선마저 불타고 잔혹한 성격과 뛰어난 지략을 지닌 용병 구루지마(류승룡)가 왜군 수장으로 나서자 조선은 더욱 술렁인다. 330척에 달하는 왜군의 배가 ..

html codeCODE filter_noneABOUT grouped_bar_chartSERVICES mailCONTACT This is code section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis. 1. div 하나의 박스를 만듦 https://developer.mozilla.org/ko/docs/Web/HTML/Element/div ..

HTML 삽입 미리보기할 수 없는 소스 페이지 구성 1. form 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다 https://developer.mozilla.org/ko/docs/Web/HTML/Element/form - HTML: Hypertext Markup Language | MDN HTML 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. developer.mozilla.org 2. fieldset 웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용합니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset : 필드셋 요소 - HTML: Hypertext Markup Language |..

카카오 오븐을 통해 간단한 자기소개 페이지를 만들어봤습니다. 일단 자기소개 페이지만 간단하게 만들고 추후 제이쿼리와 자바스크립트로 꾸밀 예정입니다. html를 만들기 위해서 visual studio code에서 새 파일 만들기 한 후 이름. html로 저장합니다. head에는 제목, 아이콘, css 파일연결, js 등등 연결하고 사용자에게는 보여지지 않는 메타데이터만 있습니다. css는 하나로 묶는 것 보다는 header, title, footer, ham 등 나눠서 저장하는 것이 좋습니다. (나중에 재사용 가능) 구글 폰트 사용하기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through gre..

block - 한 줄에 하나씩 블록형태로 우리가 지정 한대로 표기됨 - div inline - 컨텐츠의 크기만큼 꾸며줌 - span inline-block - 한 줄에 박스들을 넣는 대신 블록 형태로 우리가 지정 한대로 표기됨 position - 기본값은 static이다.( html에 정의되어 있는 순서대로 보이는 것) 1) position:relative; - 처음 위치에서 css를 준 만큼 이동 2) position:absolute; - 내 아이템과 가장 가까이 있는 박스 안에서 위치 변경됨 3) position:fixed; - 박스 안에서 벗어나서 윈도우 안에서 움직임 4) position:sticky; - 처음 위치에 있는데 스크롤 해도 원래 위치에 있음

1) display ① display:flex; - 왼쪽에서 오른쪽으로 정렬 2) flex-direction - 방향 조정 ① flex-direction:row - 왼쪽에서 오른쪽으로 정렬 ② flex-direction:row-reverse; - 오른쪽에서 왼쪽으로 정렬 ③ flex-direction:column; - 위에서 아래로 정렬 ④ flex-direction:column-reverse; - 아래에서 위로 정렬 3) flex-wrap - 한 줄이 가득 차면 다음 줄로 넘길 건지 안 넘길 건지 ① flex-wrap:nowrap; - 기본값 - 아무리 크기가 작아져도 아이템들이 한 줄에 붙어있음 4) flex-flow - 방향 조정 ① flex-direction:row - 왼쪽에서 오른쪽으로 정렬 ②..