사이먼's 코딩노트

[C언어 기본 구조] c언어 파일을 만들기 위해선 main.c와 같이 확장자가 c로 끝나도록 파일을 생성해야한다. 기본적으로 프로그래밍 언어는 위에서 부터 아래로 차례대로 1줄씩 실행된다. 출력문을 포함한 C언어의 기본적인 구조는 아래와 같다. #include int main (void) { printf("Hello World!"); return 0; } 여기서 #include는 포함한다, 불러온다 라는 뜻을 가지고있다. 그렇다면 무엇을 불러오느냐? 바로 라는 헤더파일을 불러온다는 뜻이다. stdio.h는 표준 입출력과 관련된 기능을 가진 헤더파일로 Standard Input/Output 을 뜻한다. 표준 입력은 키보드 입력, 표준 출력은 모니터 출력을 의미한다. int main은 메인 함수를 뜻하고, ..

이번에 모작해볼 홈페이지는 CGV 입니다. 모작의 범위는 2차메뉴와 무비차트 및 EVENT까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 팝업창 제작 CGV 홈페이지의 경우 상단 탑바 위에 팝업창이 있기 때문에 가장 최상단에 팝업 section을 두어 제작하였다. 2단계 : 그리드 및 레이아웃 잡기 팝업창 아래에 상단 탑바와 1차 메뉴가 들어갈 곳의 구조를 잡아줬다. 3단계 : 로고 및 유저메뉴 제작 CGV의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 상단 탑바는 좌측 우측을 나눠 display: flex와 justify-content: space-between;으로 양쪽 배치를 했고 우측의 유저메뉴는 ul, li태그를 사용하여 5개의 메뉴를 생성하였..

이번에 모작해볼 홈페이지는 마켓컬리 입니다. 모작의 범위는 3차메뉴와 제품소개 까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 마켓컬리의 구조는 상단 탑바가 위·아래로 구분되어 있다. 2단계 : 유저메뉴 커스텀 1단계에서 상단 우측 유저메뉴 부분에 list라고 작성된 텍스트를 변경해준다. 3단계 : 상단 탑바 제작 마켓컬리의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 4단계 : 1차메뉴 제작 5단계 : 2차메뉴 제작 마켓컬리의 2차메뉴는 각 1차메뉴 아래에 속하지 않고 카테고리 아래에 속한다. 2차 메뉴의 개수가 여러개이기 때문에 스크롤을 통해서 메뉴를 봐야한다. 그러기 위해선 2차메뉴 전체를 감싸는 ul태그에 overflow..

이번에 모작해볼 홈페이지는 삼성전자 입니다. 모작의 범위는 2차메뉴까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 팝업창 제작 삼성전자 홈페이지의 경우 상단 탑바 위에 팝업창이 있기 때문에 가장 최상단에 팝업 section을 두어 제작하였다. 2단계 : 그리드 및 레이아웃 잡기 팝업창 아래에 상단 탑바와 1차 메뉴가 들어갈 곳의 구조를 잡아줬다. 3단계 : 로고 및 검색창, 유저메뉴 커스텀 삼성전자의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 4단계 : 1차메뉴 제작 1차 메뉴는 좌·우측으로 구분되어 있어 좌측에는 11개의 메뉴, 우측에는 4개의 메뉴가 존재한다. 5단계 : 2차메뉴 그리드 잡기 2차 메뉴는 각 1차 메뉴에 따라 메뉴의 개수가 다르기 ..

이번에 모작해볼 홈페이지는 SK네트웍스 입니다. 모작의 범위는 2차메뉴까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 1단계는 상단 탑바 기준으로 그리드를 잡았다. 2단계 : 로고 및 유저메뉴 커스텀 sk네트웍스의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 3단계 : 1차메뉴 제작 1차 메뉴는 총 6가지로 구성되어있다. 4단계 : 2차메뉴 제작 2차 메뉴는 각 1차 메뉴에 따라 메뉴의 개수가 다르기 때문에 class 별칭을 공통으로 하나 지어놓고 개별로 class 별칭을 하나 더 두어 전체 구조는 동일하게 하되, 세세한 커스텀은 개별로 진행했다. 5단계: hover 적용 및 테두리 제거 여기까지 SK네트웍스 모작을 단계별로 진..

처음으로 시도해볼 모작 홈페이지는 '새미네 부엌'이다. 해당 홈페이지는 SUITE 폰트를 포함하고 있습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 모든 모작의 첫번째 순서는 그리드와 레이아웃 즉, border를 이용한 구조를 잡는 일이다 이미지가 들어가는 부분은 img태그에 직접 너비, 높이를 줄 예정이기 때문에 레이아웃을 잡을 때 선이 보이지 않는다. 2단계 : 텍스트 및 버튼 제작 전체 구조 틀을 잡았다면, 두번째로 왼쪽 첫번째 박스의 아래부분의 아이콘, 텍스트, 버튼을 제작해봅시다. 텍스트는 눈누에서 SUITE 폰트를 가져오고 텍스트끼리의 줄바꿈은 보통 을 사용하기도 하지만, 여기에선 p태그를 2개를 사용하여 '요리초보'와 '가이드'를 따로 작성하였다. 버튼은 border-radius을 ..

홈페이지 모작이란? 상용화된 홈페이지들을 서칭하여 HTML과 CSS만을 이용하여 최대한 비슷하게 스스로 구조를 짜보고 디자인을 해보는 것입니다. HTML&CSS에서 학습했던 디자인삼성이나 G마켓 제작하는 것이 모작의 예시라고 볼 수 있습니다. HTML과 CSS의 감을 잃지 않기 위해 꾸준히 연습하는 방법이라고 생각하시면 됩니다. 모작은 단계를 나눠서 진행하는 것이 학습에 효과적입니다. 단계는 크게 다음과 같이 나눌 예정입니다. (단계는 예시일 뿐 모든 홈페이지에 동일하게 적용되지는 않습니다.) 1단계 : 전체 그리드 및 레이아웃 잡기 2단계 : 상단 탑바 제작 (로고, 검색창, 유저박스) 3단계 : 1차 메뉴 제작 4단계 : 2차 메뉴 제작 5단계 : 3차 메뉴 제작 6단계 : 배너 이미지 삽입 7단계 ..

[transform 예제 만들기] 지난번 배운 transform, translate, transition, scale, opacity, rgba을 응용해서 예제를 하나 만들어보자. 예제의 내용은 아래 사진과 같이 이미지 5장을 화면에 놓고 각 이미지 화면에 마우스 커서를 올려놓았을 때 이미지가 흐려지고 이미지가 확대되면서 버튼이 생기는 것이다. [구조 잡기] 가장 먼저 해줄 일은 5개의 이미지가 위치할 수 있도록 구조를 짜는 일이다. 구조 짜는 방법은 복잡하게 생각하지 않아도되고, 앞서 탑바 제작하듯이 틀만 만들어준다고 생각하면 된다. img태그를 이용해 이미지를 한 번에 바로 insert하지 않고 굳이 구조를 짜서 넣어주는 이유는 img태그는 닫히 태그가 없기 때문에 hover를 적용했을 떄의 커스텀이..

[transfrom & translate & transition] 1. transform 엘리먼트를 변형시킬 떄 사용한다. 위치이동이나 회전 또는 크기를 조절할 때 사용하는 css 속성이다. absolute와 같은 position과 transform은 모두 원하는 위치로 옮기는 속성이지만, 둘을 함께 쓴다면 transform이 위로 오는 경우가 있어서 이럴 때는 position으로 통일시켜서 포지셔닝을 하는 것이 좋다. 2. translate transform의 속성값 중 하나이다. 엘리먼트를 X축, Y축, Z축으로 이동할 수 있는 속성이다. X축으로 이동할 때의 형태는 transform: translateX(X값); 이다. Y축으로 이동할 때의 형태는 transform: translateY(Y값); 이..

[G마켓 3차 메뉴 제작 ~ing] [3차 메뉴 상단(left-box) 만들기] 3차 메뉴의 top-box 중 left-box를 먼저 완성해보자. left-box에는 총 3개의 박스가 나눠서 메뉴가 들어가 있는 구조이다. 3개의 메뉴는 left-box 아래에 nav-list 태그를 추가해야한다. nav-list 태그 아래에는 메뉴의 제목과 소메뉴으로 나누는 title-box와 body-text-box를 추가한다. title-box에는 바로 각 메뉴의 제목 텍스트를 적어주고, body-text-box에는 소메뉴를 나눠주는 ul, li태그를 추가하고 각 li태그는 다른 곳으로 링크되는 역할을 가지고 있기 때문에 자식 엘리먼트로 a태그를 추가한다. 각 nav-list 태그는 한 줄에 나란히 배치해야되기 때문에..