본문 바로가기

전체 글137

[디자인_09] 메인 페이지 디자인 연습하기 선생님과 함께 메인페이지를 제작하였다 헤드폰이 83만원이나 해서 깜짝 놀랐다 역시 명품은 다른가보다,, 😌 2021. 3. 8.
[코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 html 문서를 꾸미는 방법은?? html 요소(element)를 선택해서 꾸며줄 수 있다. element 선택 방법인 복합 셀렉터에 대해 알아보자! ① 자식 셀렉터 HELLO HELLO HI HELLO - 기호 ">"를 사용하여 나타낸다 - 부모 태그 바로 아래에 있는 자식 태그만 선택이 가능하다 (첫째만 가능!!) ② 후손 셀렉터 - "+"로 나타낸다 - 지정된 요소 바로 다음 요소를 선택할 때 사용한다 ④ 형제 셀렉터 - "~"로 나타낸다 - 지정된 요소 다음에 오는 모든 요소를 선택할 때 사용한다 2021. 3. 8.
[디자인_08] 띠배너 디자인 연습하기 오늘은 띠배너를 제작하였다 항상 기획하면서 디자인을 했는데 학원에 수업들을 때는 시간이 촉박하다보니 딱히 기획하지 않고 머릿속으로 계획을 하고 디자인을 한다,,, 내가 생각했던 것보다 별로지만!! 속도가 훨 빨라진 거 같아서 기분이 좋다 😊 2021. 3. 8.
[코딩 공부_22] CSS, display 속성에 대하여 CSS에서 가장 중요하고 가장 많이 실수하는 부분이라고 하는 display 속성에 대하여 알아보자! ① inline → span, a, em, br, b, strong, mark, video SPAN - 전후 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. (한줄에 여러 개 배치) ** width와 height 속성을 가질 수 없다 ** 상하 마진을 가질 수 없다 (but 패딩은 가능) ② block → div, table, header, nav, footer, section, article, aside, p, bolockquote, ul, ol, li, td, th, form, hr, h1~h6 H1 hello DIV Page - 한줄에 한개만 배치가 된다 - 기본 너비값은 100% (100.. 2021. 3. 8.
[코딩 공부_21] CSS, 폰트 적용 3가지 방법 ① font-family : 기본 설정 - 하나의 글씨체 이름이 길다면 ""(쌍따옴표)로 묶어준다. - 폰트가 없다면 순서대로 적용된다 - 최종적으로 snas-serif, cursive, monospace 중 자동 선택된다. ② font를 다운로드받아 설정하기 - EOT(embedded Open Type), 마이크로소프트 IE 6~8지원이 되며, 크롬에선 지원 되지 않는다. - OTF(OpenType font)와 TTF(TrueType Font)는 불법 복제 위험이 있어 WOFF 형식 만들어진다. * WOFF(Web Open Font Format) 다른 글꼴보다 빠르게 로드됨 * 지원 현황 보기 : https://caniuse.com/?search=woff ③ 구글 또는 눈누 등 웹폰트 이용 : 안전하고.. 2021. 3. 8.
[코딩 공부_20] CSS, 절대단위와 상대단위 CSS의 크기 단위는 절대단위와 상대단위로 구분된다. ① 절대단위 : in, cm, mm, pt, pc가 있며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적이다 ② 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는 데 유리하다 단위 내용 성질 px 화면 pixel 개수의 단위 * 해상도에 따라 화면에 보이는 실제 크기가 다를 수 있다 상대 크기 em (부모 요소에서) 기존에 사용된 font 킄기에 비해 얼마의 비율의 크기로 결정 (1.0em = 100%) (ex : 1px*1em) 상대 크기 % 부모 요소의 컨테이너 크기에 비해 차지함 상대 크기 pt 포인트 단위로 1포인트는 1/72인치 기준으로 인쇄시에도 비슷한 크기로 인쇄됨 절대 크기 rem (r=root) .. 2021. 3. 7.
[디자인_07] 클리핑 마스크를 이용하여 포스터 만들기 요번 수업은 클리핑 마스크를 이용하여 합성하기 였다,, 클리핑 마스크를 이용해서 이런 효과로 디자인 할 수 있음을 확인하는 것이었기 때문에 아무렇게 막했지만,, 너무 마음에 안들었다,, 효과도 넣고 했지만 마음에 안들었다 🙄 역시 나는 사진 고르는 소질이 없는 거 같다,, 더 열심히 보고 해봐야겠다는 마음이 들었다! 😀 2021. 3. 5.
[코딩 공부_19] CSS, 글자에 적용하는 스타일들 ① font-size : 폰트의 크기를 지정한다 - value : px, em, pt, %, rem ② font-weight : 폰트의 굵기를 지정한다 - value : 100 ~ 900, bold, bolder, lighter, normal (400 = normal, 700 = bold, 부모요소에 따라 bolder, lighter) ③ line- height : 줄의 높이를 지정한다 - value : px, em, pt, %, rem ④ font-family : 폰트를 지정한다 - value : px, em, pt, %, rem ⑤ font-style : 문자 스타일(기울림체) - value : normal, italic, obique ⑥ color : 색상을 지정한다 - value : hexcode.. 2021. 3. 5.
[코딩 공부_18] CSS 셀렉터 우선순위 오늘은 CSS 셀렉터 우선순위에 대해 알아보자! 전에 셀렉터 종류에 대해 알아봤었는데 셀렉터에 따라 우선순위가 정해져 있어서 우선 순위가 높을 수록 "내가 먼저 보여줄꺼야!"하는 성질이 강하다 1위, !important : 다 비켜! 내꺼 먼저 보여줄꺼야!! 하는 친구여서 중요할 때만 사용해야한다 (빈번하게 사용 금지!!) 점수로 따지면 10000점이다 2위, inline : 스타일을 주고 싶은 곳에 바로 옆에 입력하는 것이다 예를 들어 h1 태그에 스타일을 주고 싶으면 h1 태그 바로 옆에 style을 주면 된다! 점수로 따지면 1000점이다 안녕하세요 셀렉터 우선 순위를 알아봅시다 3위, id : style에 적용 시킬 땐 아이디 앞에 #을 붙여서 사용한다. 전체문서에서 딱 한번만 사용 가능하며 중복.. 2021. 3. 4.
[코딩 공부_17] 절대경로? 상대경로? 경로 표기법에 대해 알아보자! 절대경로와 상대경로를 많이 헷갈려해서 경로 표기법에 대해 복습해본다! 😋 * 현재 페이지에서 다른 페이지(리소스)를 불러오기 위해 경로를 꼭 입력해야한다 크게 상대경로와 절대경로가 있다!! ① 상대경로 : 현재 위치를 기준으로 웹 페이지나 파일의 경로를 말한다. 현재 위치는 "나!!"를 말하는 것이다! 내가 있는 곳 기준으로 오른쪽 건물 왼쪽 건물을 말한다 - / : root - ./ : 현재 폴더 - ../ : 상위 폴더 상대경로 상대경로 ex) /img/web.jpg ② 절대경로 : 특정한 웹 페이지나 파일이 가지고 있는 고유한 경로를 말한다. - C:\User\Hello\Documents - http://www.naver.com 절대경로 절대경로 2021. 3. 4.
[디자인_06] 포토샵 누끼 연습 + 텍스트 배치 ↓ 포토샵 누끼 연습 오늘은 포토샵 누끼 따는 연습을 하였다! 펜툴이 아닌 select and mask로 누끼를 땄는데 깔끔하게 딴다는 느낌보다 부들부들한 느낌이 많이 들었다 고양이처럼 솜털솜털 친구는 select and mask로 누끼를 따는 것도 좋은 방법 같다 ↓ 텍스트 배치 풍경에 텍스트를 배치하는 실습을 했다 ! 옛날에 일본 갔을 때 찍은 사진으로 실습을 했당 😉 또 가고 싶다 😥 얼른 코로나가 끝나면 좋겠다! 2021. 3. 4.
[코딩 공부_16] 웹 개발 작업환경 세팅하기 (VSC 전용) * 작업환경 세팅 부분은 설정할 때마다 글 수정 😎 1. VSC (https://code.visualstudio.com/download) : 웹 개발을 위한 소스 코드 편집기 프로그램으로, 마이크로 소프트 사에서 제작한 프로그램이다. 작업에 편리한 기능을 제공하기 때문에 많은 개발자가 사용하는 프로그램이다. ① html에서 기본 필요 코드 자동 완성하는 방법 : ! + TAB → 이렇게 사용하게 되면 lang="en" 즉 영어로 되어 있기 때문에 lang="ko"로 변경해야하는 번거로움이 있다. 그 번거로움을 해결하려면 아래의 방법을 이용해보자!! ② html 기본 필요 코드 + lang="ko"로 자동 완성하는 방법 - VSC > 왼쪽 아래 톱니바퀴 > 사용자 코드 조각 설정 > html.json 작성.. 2021. 3. 4.
[코딩 공부_15] CSS 셀렉터(선택자) CSS에서 엄청 중요한 부분인 셀렉터에 대해 알아보자! ① CSS 셀렉터 (Selector) = 선택자 : 내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법 기본 셀렉터 이름 설명 예시 전체 셀렉터 (universal selector) html 문서 내의 모든 요소를 선택 * {font-size: 12px} 태그 셀렉터 (tag selector) 태그를 선택하는 셀렉터 p {font-size: 12px} 아이디 셀렉터 (id selector) id 값을 선택하는 셀렉터 * 유일해야하며 하나여야 한다. #last {font-size: 12px} 클래스 셀렉터 (class selector) class값을 선택하는 셀렉터 * 중복, 다수 선언 가능 .wrap {font-size: 1.. 2021. 3. 3.
[디자인_05] GTQi 3번 문제 연습 그라데이션까지 깨버려서 난리도 아니다 😑 CS6버전은 따로 둥근사각형을 더 둥글게 하는 방법이 없는 줄 알았는데 마우스로 도형을 만들면서 방향키 위아래를 이용해서 둥글게 만드는 거 였다 !! 몰랐는데 선생님께서 알려주셔서 계속 "오오오" 외친거같다 !! 다음 수업시간은 다시 포토샵의 세계로 ^_^ 2021. 3. 3.
[코딩 공부_14] CSS로 색상을 표현하는 방법 ① hexcode : RGB 값을 16진수로 표현해 사용하는 방법 - 핵사코드는 색상표현 방법 중, 가장 많이 쓰는 방법으로 3개 또는 6개의 숫자를 이용하여 색상을 표현한다. ex) #000, #000000, #fff, #ffffff...등 - #00 00 00 Red Green Blue → 3자리인 경우, #000 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 4 5 6 7 8 9 A B C D E F - 0에 가까워 질수록 색상이 없어지고, F에 가까워 질수록 해당 색이 늘어난다 ② color mames : 이름 그대로 색상 이름을 직접 지정해 사용하는 방법 - 브라우저별로 생각하는 색상이 다르기 때문에 색상 차가 있을 수 있기 때문에 주의해서 사용해야한다. 예를.. 2021. 3. 3.
[디자인_04] GTQi 2번 문제 연습 오늘은 멍든 불가사리를 붙이고 다니는 눈에 초점없는 귀여운 문어 🐙,,와 니은 닭을 그렸다 귀여웠당 😎 2021. 2. 26.
[코딩 공부_13] DGBook 만들어 보기 오늘 DGBook을 하드코딩하기가 시험이었다! 이때까지 하던 것보다 많이 어려워서 머리를 빙글빙글 돌렸는데 머리를 굴려보니 다 했던 거라 내가 생각했던 만큼 완료했다! 그래서 DGBook 결과화면을 공유하도록 하겠다! ↓index.html DGBook 메인으로 이동하기 > 회원가입 하러 가기 > 주간 베스트 정보입니다 주간 베스트 책 표지 책 정보 비고 종합 가정 경제 고전 지은이: 염승환 출판사: 메이트북스 둘러보기 지은이: 염승환 출판사: 메이트북스 둘러보기 ‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블! 2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다. 세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많.. 2021. 2. 26.
[디자인_03] GTQi 1번 문제 연습 ↓ GTQi 1번 문제 연습 오늘 디자인 수업 시간에는 GTQi 1번 문제를 연습하였다! 나는 김밥이 국수?에 뛰어드는 모습이 마치 내가 음식을 대하는 모습과 겹쳐보여서 호감이 갔다 독특하게 생긴 걸 좋아해서 그런거 같다 2021. 2. 26.
[코딩 공부_12] CSS 선언하는 방식 3가지 ① 인라인 방식(in-line) : HTML 태그에 'style' 속성을 직접 작성하는 방식 hello world - 이런 방식을 사용하면 css에서 선택자를 작성하지 않아도 style이 적용 가능하다. 따로 선택자가 필요하지 않다는 장점이 있지만 복잡한 웹디자인을 제작할 때, 반복적인 사용과 유지보수적인 면에선 번거로울 수 있다. 그렇다고 이 방법이 무조건 안좋다는 것은 아니다!! 나중에 알 수 있는 부분이지만 특정한 기능들이 자동으로 삽입 되게 하는 것으로 사용할 땐 적합하다 단, 직접적으로 작성하는 것은 피해야한다!! ② 내장 방식(embedded) : HTML head 안에을 작성하는 방식 hello world - 안에 작성한 div 선택자에 의해 body안에 들어간 hello world라는 텍스.. 2021. 2. 25.
[코딩 공부_11] <button> 태그 관련 버그 해결 ① 태그 : 사용자가 클릭할 수 있는 버튼을 생성할 수 있다. 텍스트나 이미지와 같은 콘텐츠 삽입이 가능하다. ② 태그 관련 버그 (발생 상황) 위 사진은 사용자가 로그인 할 수 있게 ID/PW를 입력할 수 있는 창이다. 로그인을 하면 바로 메인 페이지로 이동할 수 있게 링크를 걸어두었다. 또한, 아이디가 없는 사용자가 회원가입을 할 수 있도록 로그인 버튼을 생성하여 회원가입 페이지로 이동할 수 있게 페이지를 제작하였다. ** 버그발생 ** - 회원가입 버튼 : 회원가입 텍스트를 클릭하면 정상작동하지만, 버튼(빨간색으로 표시) 부분만 클릭할 시 메인 페이지로 이동하는 버그가 생겼다. (원인 발견하기) DEFLIX 로그인 로그인 정보 ID: PW: 개인정보 처리방침에 따른 개인정보 수집 및 활용에 동의합니.. 2021. 2. 24.
[디자인_02] 펜툴 연습하기 짱구 이미지를 밑그림으로 펜툴 연습↓ 벼랑 위의 포뇨를 밑그림으로 펜툴 연습 ↓ 포뇨를 펜툴로 연습하다가 갑자기 프로그램이 꺼졌다 ㅎㅎ.. 정말 가차없이 꺼지고 복구도 안되서 당황했다 그래도 수업시간 안에 끝내서 좋았다 ✌ 2021. 2. 24.

티스토리툴바