한번 해보자 코딩

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한 블로그 만들기를 하면서 CSS로 레이아웃 틀을 미리 만들어놓고 HTML에서 입력만 해주면 바로 레이아웃이 바뀌도록 작업해줬는데요 정리를 한번 해보겠습니다. HTML Javascript Topic 지속적인 학습과 개발 IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. 더보기 팀워크와 소통 능력 향상 개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다. 더보기 코드 가독성 및 유지보수성 고려 개발자가 작성한 코드는 다른 개발자들이 이해하고 유..

사이트 만들기 푸터 유형 코드 보기 완성 화면 사이트 만들기의 푸터 영역을 정리해보겠습니다. 피그마를 이용해 디자인 작업을 먼저 해주고 코딩으로 들어가겠습니다. 푸터 모아보기 전체글 주간 best 커피 업체 정보 원두납품 정보 커피교육 정보 커피 아카데미 업체 이벤트 & 행사 스페셜티 카페 스페셜티 로스터 커피관련 브랜드 매거진 커피뉴스 카페 투어 컨텐츠 제보 푸드&음료 커피 라이브러리 중고마켓 전체 장비 매장 커피용품 기타 SNS facebook instagram 공지사항 이용문의 쇼핑몰 사이버몰 이용약관 광고 상품 안내 2023 JINHYUNMI 커피 관련 사이트 Portfolio is Power All Rights Reserved body영역 안에 text 를 넣어줍니다. footer menu와 f..

사이트 만들기 텍스트 유형 오늘은 사이트 만들기의 텍스트 유형을 정리해보겠습니다. 💜 텍스트 유형 코드 보기 완성 화면 피그마를 사용해 디자인 작업을 해주고 코딩으로 넘어갑니다. notice 커피 맛집 찾기 요즘 유행하는 커피 콜드 브루 커피, 네이트로 커피, 핸드 드립 커피, 라떼 아트, 샷 브루 커피, 캡슐 커피 등 여러가지 커피가 있습니다. 요즘은 달달한 크림이 올라간 커피도 유행이고 쓴 에스프레소도 유행입니다. 더보기 커피 맛있는 카페 네이버 블로그나 인스타그램, 근처 카페 찾기 등과같은 검색 기능으로 카페를 찾을 수 있습니다. 전문적인 로스팅카페를 원한다면 로스팅하는카페를 검색해보면됩니다. 더보기 1일 2카페 맛있고 예쁜 카페를 하나 가면 근처에 또 좋은 카페 없나 둘러보게 됩니다. 그렇게 1일..

사이트 만들기 슬라이드 유형 오늘은 사이트 만들기 했던 유형 중 슬라이드 유형을 정리해보겠습니다 💜 슬라이드 유형 코드 보기 완성 화면 전과 동일하게 피그마로 먼저 작업해주고 코딩을 해줍니다. /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mt40 ..

사이트 만들기 이미지 유형 오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다! 💜 이미지 유형 코드 보기 / 완성 화면 완성 화면입니다. 디자인은 피그마에서 작업해주었습니다. 맛있는 커피를 찾아서 여러 카페들을 가본 후 보기에도 예쁘고 맛있는 찐 커피맛집들을 찾아서 커피란 무엇인가 일반적으로 커피 열매의 씨앗인 커피 콩, 혹은 그 씨앗을 로스팅해 갈아서 물에 우려내서 만드는 음료 자세히보기 커피의 종류 커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카 자세히보기 body 안에 section태그를 만들어 제목들을 지정해준다. article 태그안에 이미지를 포함하고, figure 태그는 이미지를 감싸고 있는 header역할을 하고, div태그는 이미지에 대한 정보를 담고 있는..

사이트 만들기 카드타입(cardType) 정리 오늘은 수업시간에 해본 사이트 만들기 중 카트타입 정리를 해보려고 합니다. 우선 만들어본 사이트의 완성본입니다. 💜 카드 유형 코드 보기 / 완성 화면 피그마를 이용해 디자인 작업을 먼저 하고 그 틀을 가지고 코드를 작성합니다. 사용한 코드들 커피에 대해 알아보자 커피는 카페인이 포함된 차류 음료입니다. 커피는 주로 커피 콩에서 추출되며, 세계 각국에서 재배되고 있습니다. 일반적으로 커피는 커피빈, 원두, 분쇄된 커피 등 다양한 형태로 판매됩니다. 커피의 좋은점 커피는 일부 연구에서 많은 건강상의 이점이 있다는 것으로 나타났습니다. 커피는 당뇨병, 간암, 알츠하이머병 등의 발병 위험을 줄이는 데 도움이 될 수 있다는 것으로 알려져 있습니다. 자세히 보기 커피..

CSS 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size, 단위의 고찰 문자 크기를 지정하는 속성 글자 크기를 지정하지 않으면 기본값 16px이 됩니다. px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size: 150%; em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위 font-size: 1.5..

CSS 레이아웃 grid 방식 정리 grid layout 은 비교적 직관적이어서 다른 레아이웃보다 사전지식이 덜 필요합니다. 예제1 가장 많이 접해본 레이아웃으로 시작해보겠습니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. 가로로2칸 세로로3칸이므로 grid-templat-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrpa { display: grid; grid-templte-colums: 30% 70%; grid-template-rows: 50px 150px 50px; } 다음은 각 칼럼의 경게선 번호를 알아야 합니다. 칼럼이 두개이므..

CSS 레이아웃 flex 오늘은 레이아웃을 구성할 때 쓰는 flex방법에 대해 정리해보려고 합니다. 최신 브라우저들에서 많이 실행됩니다. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex : display: -webkit-flex: display: -ms-flexbox: 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예제 더보기 위의 예제와 같이 display: flex를 써주면 이렇게 레이아웃이 잘 잡힙니다. 예제에서 display: flex 를 선언하지 않으면 이렇게 레이아웃 밖에 나타납니다. flex-direction 자식 요소..

CSS 선택자 종류 14가지 오늘은 CSS의 선택자 종류 14가지를 간단하게 정리해보려고 합니다. 우선 선택자란 CSS가 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.type 선택자, id선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 이렇게 14가지의 선택자가 있는데요 그럼 하나씩 간단하게 알아볼까요!? type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. p태그 안에 글자들을 파란색으로 표시하도록 속성..

CSS float 방법에 대해 block요소는 원래 세로로만 나열되는데요!? float을 이용해 가로로 배치 할 수가 있습니다! 한번 알아볼까요!? float float은 요소를 좌측이나 우츠겡 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다. float: left; 이렇게 작성해주면 됩니다. 속성 값 속성 설명 left 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 right 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 아래 코드를 살펴보면 float를 사용했을 때와 사용하지 않았을 때의 차이를 잘 알 수 있습니다. float을 사용하지 않았을 때 See the Pen Untitled by hyunm..

CSS선택자_id선택자와 class선택자의 차이점 id 선택자 HTML문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여 HTML 요소에 id로 이름을 붙일 때는 유일한 이름을 부여 다른 요소에 같은 id명을 또 주면 안됨 CSS에서는 id 선택자 앞에 '#'을 붙여야 함 id명이나 class명은 숫자로 시작할 수 X 영문자로 시작 [ 예시 1 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성 부여 가능 여러개의 요소에 같은 class명 부여 가능 하나의 요소에 여러개의 class명 부여 가능 CSS에서는 class 선택자 앞에 ' ..

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 수업시간에 만들어본 애니메이션인데요 너무 신기합니다! 언젠간 제가 만들고 싶은 애니메이션을 만들 수 있겠죠...? 다들 화이팅..!!

CSS 표현방법에 대해 이번엔 CSS의 기본 문법에 대해 알아보려고 합니다! 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 그 스타일이 기술된 페이지에만 적용 [ 예시 1 ] 우리를 기쁘게 하는 것들. [ 예시 1_결과 ] 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 .css 확장자를 가진 별도의 파일로 저장 HTML에서는 태그를 이용해 선언 그 스타일을 선언한 모든 HTML 페이지에 적용 [ 예시 2 ] 우리를 기쁘게 하는 것들. [style.css] @charset "UTF-8"; p { color: red; } [ 예시 2_결과 ] @inmort css 안으로 다른..