본문 바로가기

114

[코딩 공부_30] wiki.html을 css로 꾸며보자 2 오늘은 어제 실습한 위키 2를 복습해보면서 새로 정리해보았다 위키 2를 할때 어떻게든 되면 됬지 싶어서 div ~ div로 셀렉터를 잡았었는데 선생님이 많이 당황해하셨다 ㅎㅋㅋㅋ 그 뒤로 삐뽀삐뽀 위기다!! 위기!라고 생각해서 열심히 복습 중이다 😂 잘하고 있는 건지는 잘모르겠지만 ,, 확실히 그 전에 쳤던 코드보다 깔끔하고! 빠른 시간안에 해결했다 ! 어제 복습할 떄는 2시간 30분정도로 해결했는데 오늘은 1시간 30분정도 걸렸다! 뿌듯하다! 위키백과:사용자 모임 위키백과, 우리 모두의 백과사전. 위키백과 사용자 모임 한국어 위키백과의 커뮤니티 포털로, 사용자들의 편집 활동을 보조하기 위한 도움말이나 프로젝트를 모아둔 곳입니다. 토론과 의견 교환은 사랑방에서 이루어지고 있습니다. 위키백과에 관해 궁금한.. 2021. 3. 11.
[코딩 공부_29] line-height / text-align 에 대하여 ① line-height : 인라인 박스의 높이를 지정한다 (=행간) 값 normal | | | | inherit 기본값 normal 적용대상 모든 요소 상속 상속됨 % 엘리먼트 자체의 글꼴 크기를 참조 미디어 visual 2021. 3. 10.
[코딩 공부_28] reset.css ① reset.css - html 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서 크로스브라우징(=브라우저마다 동일한 모양) 구현할 때 유용하다 ** 크로스 브라우징이란? - 마크업을 하면서 지켜야 하는 4가지 원칙 중 하나, 웹 표준 / 웹 접근성 / 시맨틱 마크업 / 크로스 브라우징 * HTML 요소 기본 CSS 초기화 * 그 외 CSS 리셋 코드 더보기 Eric Meyer’s “Reset CSS” 2.0 https://meyerweb.com/eric/tools/css/reset/ HTML5 Doctor CSS Reset https://html5doctor.com/html-5-reset-stylesheet/ Yahoo! (YUI 3) Reset CSS https://yuilibrary.com/.. 2021. 3. 10.
[코딩 공부_27] box-shadow가 무엇일까 ① box-shadow : 선택한 요소에 그림자 효과를 만들어주는 속성이다 문법 설명 none 그림자 효과를 없앤다 x-position (필수) 가로 위치 y-position (필수) 세로 위치 blur 그림자를 흐리게 만든다 값이 클 수록 더 흐려진다 spread 양수일 경우, 그림자를 확장하고 음수인 경우 축소한다 color 그림자의 색상을 정한다 inset 그림자를 요소의 안쪽에 만든다 initial 기본값으로 설정한다 inherit 부모 요소의 속성값을 상속받는다 +) 실습 shadow +) 결과 2021. 3. 10.
[코딩 공부_26] HTML에 아이콘을 넣어보자! 아이콘을 넣을 수 있는 방법 2가지에 대해 알아보자! ① XEICON (xpressengine.github.io/XEIcon/) - 회원가입 X ↓ 사이트 태그 안에 아래의 코드를 붙인다 ↓ ↓ 메뉴인 "LIBRARY"를 클릭하고 마음에 드는 아이콘의 제목을 아래와 같이 작성한다 ↓ xpressengine * 자세한 내용은 XEICON > GET STARTED 에서 확인이 가능하다 (xpressengine.github.io/XEIcon/started.html) * 아이콘 관련 기능에 대한 소개 : (xpressengine.github.io/XEIcon/examples.html) ② Fontawesome (fontawesome.com/) - 회원가입 O - 회원가입 후, 계정을 클릭하고 "font awes.. 2021. 3. 9.
[코딩 공부_25] box-sizing 하기! ① box-sizing : 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다 - width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다. 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 출처) box-sizing - 생활코딩 box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하 opentutorials.org 2021. 3. 9.
[코딩 공부_24] CSS Selector, 가상 셀렉터 1. 동적 셀렉터 : 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법 ① a:link → 셀렉터가 방문하지 않은 링크일때 가상 셀렉터 naver hershes yahoo ② a:visited → 셀렉터가 방문한 링크일 때 가상 셀렉터 naver hershes yahoo ③ a:hover → 셀렉터에 마우스가 올라와 있을 때 가상 셀렉터 naver hershes yahoo ④ a:active → 셀렉터가 클릭된 상태일 때 가상 셀렉터 naver hershes yahoo ⑤ a:focus → 셀렉터에 포커스가 들어와 있을 때(tab) 가상 셀렉터 naver hershes yahoo 2. 구조 가상 클래스 셀렉터 ① :first-child → 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 .. 2021. 3. 9.
[코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 html 문서를 꾸미는 방법은?? html 요소(element)를 선택해서 꾸며줄 수 있다. element 선택 방법인 복합 셀렉터에 대해 알아보자! ① 자식 셀렉터 HELLO HELLO HI HELLO - 기호 ">"를 사용하여 나타낸다 - 부모 태그 바로 아래에 있는 자식 태그만 선택이 가능하다 (첫째만 가능!!) ② 후손 셀렉터 - "+"로 나타낸다 - 지정된 요소 바로 다음 요소를 선택할 때 사용한다 ④ 형제 셀렉터 - "~"로 나타낸다 - 지정된 요소 다음에 오는 모든 요소를 선택할 때 사용한다 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.
[코딩 공부_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.
[코딩 공부_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.
[코딩 공부_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.
[코딩 공부_13] DGBook 만들어 보기 오늘 DGBook을 하드코딩하기가 시험이었다! 이때까지 하던 것보다 많이 어려워서 머리를 빙글빙글 돌렸는데 머리를 굴려보니 다 했던 거라 내가 생각했던 만큼 완료했다! 그래서 DGBook 결과화면을 공유하도록 하겠다! ↓index.html DGBook 메인으로 이동하기 > 회원가입 하러 가기 > 주간 베스트 정보입니다 주간 베스트 책 표지 책 정보 비고 종합 가정 경제 고전 지은이: 염승환 출판사: 메이트북스 둘러보기 지은이: 염승환 출판사: 메이트북스 둘러보기 ‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블! 2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다. 세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많.. 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.
[코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? 이번에는 내가 실수했고 궁금했던 부분에 대해 포스팅하고자 한다. 내가 태그에 대한 의미나 기능에 대해 알아보지 않고 사용했기 때문에 생긴 일이라 생각한다. 조금 더 주의해서 태그를 볼 필요가 생겼고, 똑같이 구동하지만 작은 차이가 있기 때문에 연관있는 태그는 한번 더 보고 가야된다는 생각을 하게 만든 태그이다. 내용은 스텍 오버플로를 참고하여 제작하였다. 과 의 차이는 무엇일까? 두 태그를 실행 시켰을 때 동일한 버튼의 모양이 나오기 때문에 헷갈릴 수 있지만, 둘의 역할이 다르다. 태그는 여는 태그와 닫는 태그로 이루어져 있어 컨텐츠를 감쌀 수 있고, 은 단일태그인 차이점이 있다. 그렇기 때문에 태그가 더 자유롭게 사용이 가능하며, 이미지와 같은 컨텐츠를 버튼으로 제작할 수 있다. 은 form태그안에 속.. 2021. 2. 23.