사이먼's 코딩노트

[변수] 변수는 데이터를 저장할 수 있는 특정 공간이라고 생각하면 좋다. 변수에는 공간이 매우 작기 때문에 값을 하나만 넣을 수 있다. Java에서 정수 타입을 가진 변수를 선언하고 싶다면 int x; 와 같이 작성하면 된다. 여기서 말하는 int는 integer의 줄임말이며 정수를 뜻한다. 변수 2개를 선언하고 각 변수에 숫자를 부여하는 구조는 아래와 같다. class Main { public static void main(String[] args) { int x = 10; // x라는 변수에 10 값 선언 int y = 20; // y라는 변수에 20 값 선언 System.out.println("x : " + x); System.out.println("y : " + y); } } 위 예시에서 // 하..

[변수] 변수는 데이터를 저장할 수 있는 특정 공간이라고 생각하면 좋다. 변수에는 공간이 매우 작기 때문에 값을 하나만 넣을 수 있다. C언어에서 정수 타입을 가진 변수를 선언하고 싶다면 int x; 와 같이 작성하면 된다. 여기서 말하는 int는 integer의 줄임말이며 정수를 뜻한다. 변수 2개를 선언하고 각 변수에 숫자를 부여하는 구조는 아래와 같다. #include int main(void) { int x; // x라는 변수 선언 int y; // y라는 변수 선언 x = 30; // x에 30이라는 숫자를 넣는다. y = 20; // y에 20이라는 숫자를 넣는다. printf("x의 값은 %d, y의 값은 %d이다", x, y); return 0; } 위 예시에서 // 하고 뒤에 씌여진 문장..

[JAVA 기본 구조] Java 파일을 만들기 위해선 main.java와 같이 확장자가 java로 끝나도록 파일을 생성해야한다. 기본적으로 프로그래밍 언어는 위에서 부터 아래로 차례대로 1줄씩 실행된다. 출력문을 포함한 Java의 기본적인 구조는 아래와 같다. class Main { public static void main(String[] args) { System.out.println("Hello World!"); } } Java에서 System.out.println과 같이 코드를 작성한 후에는 항상 세미콜론(;)을 작성해줘야 코드가 실행된다. [System.out.println] System.out.println은 출력문 문법이다. System.out.println은 " " 안에 출력하고 싶은 문자..

[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단계 ..