글

라벨이 Study인 게시물 표시

[Udemy] The Web Developer Bootcamp -6

이미지
100일 공부 도전 D+1 CSS 연습 예제 내용을 정리합니다. Udemy에서 The web developer bootcamp를 듣고 있으며 오늘은 css 예제 연습을 진행했습니다. 주어진 html 파일 소스는 수정하지 않고, css로 효과를 주는 것 입니다. CSS는 이전에도 설명했듯이 웹의 형용사라고 생각하면 쉽습니다. 글씨를 빨갛게 배경을 검게 글자 사이즈를 크게와 같이 표현할 수 있습니다. 물론 html에서도 지원하는 기능이지만 CSS 파일을 연결하면 일일이 태그를 수정하지 않아도 됩니다. 제가 연습한 예제는 아래와 같습니다. /* Style the HTML elements according to the following instructions.  DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS! /* Give the <body> element a background of #bdc3c7*/ body {     color : #bdc3c7 ; } /* Make the <h1> element #9b59b6*/ h1 {     color : #9b59b6 ; } /* Make all <h2> elements orange */ h2 {     color : orange ; } /* Make all <...
댓글 쓰기
자세한 내용 보기

[Udemy] The Web Developer Bootcamp -5

css 참고 사이트 1)  https://specificity.keegan.st/ css 스타일에서 상속의 개념을 사용하는데 사용되는 스타일의 단계를 계산해주는 웹사이트. 암기를 싫어하는 나로서는 옆에두고 참고하면 좋을 사이트 이다. 2)  https://code.tutsplus.com/ code스타일??? 을 볼수 있는 곳인거 같음.... 사실 아직 파악 안됨 3) 스택오버플로우 페이지 css를 활용한 check box 스타일 이용법
댓글 쓰기
자세한 내용 보기

[Udemy] The Web Developer Bootcamp -4

CSS 기초 작동 원리 *.css, *.html의 파일이 있을 때 html파일 내에 css 파일의 링크를 걸어두면 해당 파일에서 명명한 대로 스타일이 변하는 것.  a.css에 <h1></h1>은 color: purple로 설정되있으면 a.css 파일의 링크가 걸려있는 b.html내의 <h1></h1>은 보라색으로 보이는 것이다.  컬러 1) 컬러 명으로 지정 간단하게 red, green, blue로 명명 하는것 2) 16진수로 표현 CSS의 컬러는 기본적으로 16진수 #000000 6자리의 16진수로 이루어짐 두 개씩 나눠서 빨강 , 녹색 , 파랑 을 이루고 있다. 빛의 삼원색이다. 그래서 가산혼합을 미술시간에 배웠던것 같다. (더할 수록 밝아 진다고 해서 가산 혼합) 참고로 색의 삼원색은 빨강 , 노랑 , 파랑 이며 감산 혼합이다. (가산혼합과 반대로 더할 수록 색이 진해짐) 그래서 컬러의 #000000은 가장 낮다. 그러므로 검정색이된다. 반대로 #FFFFFF은 숫자가 가장크다. 가장 밝은 흰색이 되는 것이다.  색깔 참고 사이트: www.colorpicker.com 3) RGB Red, Gree, Blue의 첫 글자를 딴것이다 위의 16진수가 두 자리씩 컬러를 표현한다고 했다. 그러면 두자리 16진수의 가장 큰값은 255이다. 0~255로 색깔을 표현하는 것이다. 문법은  rgb(0,0,0)            -> #000000 -> black 이 되는 것이다. 4) RGBA RGB에 A가 붙었다. A는 Aplha를 의미한다. 투명도를 의미한다. 1은 투명도 없음 1이 가장 크며 작을 수록 투명해진다. 문법은 rgba(0,0,0, 1 ) 또는 투명하게 rgba(0,0,0,.5)이렇게 표현한다.
댓글 쓰기
자세한 내용 보기

[Udemy] The Web Developer Bootcamp -3

HTML 간략 실습 390강 중 40강을 끝냈다. 실습으로 진행된 내가 작성한 html 코드 아주 그냥 초보자 수준이다. sublime text라는 툴을 처음 써보는데 편하다. 개발자들 개발 편하게 하라고 쓰는 건지.. 암튼 자동완성도 잘 되고 좀 짱인듯 하다. 아직 헷갈리는 부분이 많지만 계속 하다 보니 좀 알것 같기도 하다. 솔루션으로 제공해준 코드를 보면 쪼렙이지만... 더 공부하다 보면 뭔가 나아지겠지.. 않을까 생각된다. < !DOCTYPE   html > < html > < head >     < title >Register</ title > </ head > < body >     < h1 >Register</ h1 >       < form >     < div >         < label   for = "First" >First Name: </ label >         < input   name = "First"   id = "First"   type = "text"   placeholder = "John"   required >         < label >Last Name: </ label >    ...
댓글 쓰기
자세한 내용 보기

[Udemy] The Web Developer Bootcamp -2

Introduction to HTML MDN 사이트에서 많이 참고 하자. MDN 사이트 바로가기 구글 검색창에서 MDN HTML, MDN DOCTYPE 으로 입력하면 기본 포맷을 볼 수 있다. 단순 입력이 아니라 문서 포맷에 맞게 입력하는 것이 중요하다. < h1 >This is my first tag!!!</ h1 > 이렇게 입력하고 저장해도 나오지만 < !DOCTYPE   html > < html > <!-- metadata goes in head --> < head >     < title >My First Page</ title > </ head > < body > <!-- content goes in the body -->     < h1 >This is my first tag!!!</ h1 > </ body > </ html > 이렇게 양식을 맞춰서 넣는 것이 중요! html에서 <title></title> 태그는 검색 엔진에 노출되거나 인터넷 브라우저 탭 부분에 보이는 제목이다. 없으면 단순 해당 파일의 제목이 노출 된다.
댓글 쓰기
자세한 내용 보기

[Udemy] The Web Developer Bootcamp -1

The Web Developer Bootcamp Chapter 14: The Front End Holy Trinity Front End에 대한 기본 개념 FrontEnd의 기본 적인 비유 html: 명사. 무슨 내용을 보여줄지 표현한다 css: 형용사. 어떤 모습으로 보여줄지 표현한다 javascript: 동사. 어떤 액션을 취할지 결정한다 가볍게 개념을 잡는 시간이었다. 웹페이지는 매번 접하지만 정말 Frontend에 대한 개념을 쉽게 설명해줬음.
댓글 쓰기
자세한 내용 보기