web
JS06 :: 바닐라 JS 프로젝트(2)
JS06 :: 바닐라 JS 프로젝트(2)
2021.05.22이전 바닐라 JS 프로젝트에서 배경화면을 변경하여 나만의 앱을 생성해보겠습니다. 정적인 화면을 구성하는 index.html 에서 배경화면 처리를 위한 script를 등록하겠습니다. index.html에서 weather.js 를 등록해줍니다. index.html bg.js image는 총 3장을 준비하였습니다. 오리 3총사 image 객체를 생성하고 나면 css의 선택자 class를 포함시키고, body 태그에 해당 tag 를 prepend 하게 됩니다. body 안에 image 가 잡히게 됩니다. (css에서 z-index = -1 로 잡았기 때문에 현재 맨 뒤로 가있는 상태입니다.) 이 다음 코드인 weather.js 구현해야 하는데 현재 위치 좌표를 받아오지 못하고 있다. mac에서 위치 좌표를 설정..
JS06 :: 바닐라 JS 프로젝트
JS06 :: 바닐라 JS 프로젝트
2021.05.21바닐라 JS 공부를 시작하면서, 노마드 코더에서 제공하는 바닐라 JS로 크롬웹 만들기를 트라이 해보았습니다. Directory 구조 우선 가장 베이직이 되는 index.html 부터 살펴보겠습니다. html의 구조는 head, body 로 이루어져 있습니다. stylesheet에 포함되어 있는 index.css 로부터 css 값을 읽어와 html이 web의 DOM에 업데이트 하게 됩니다. index.html 보통의 경우에 아래와 같이 많이 사용하게 됩니다. HTML Foramt 여기서 div tag를 이용해 웹 상에 움직이는 시계를 트라이 해보겠습니다. 첫번째 구현 항목은 web으로 동작하는 시계를 만들어보는 것입니다. Redering 화면 ⏤ 1 위 렌더링 화면을 구성하기 위해서 아래 html, js를..
Kakao Clone05 :: CSS
Kakao Clone05 :: CSS
2019.03.02잘 적용이 안되는것도 있는데 체크한 부분은 포스팅으로 올린다. 오늘은 css 부분에 대해서 다뤄봤는데 관련되서 몇가지 정리하려고 한다. . class 이름 { } 이런식으로 쓰는것이 보통이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 .top-header .header__top, .top-header .header__bottom { display:flex; justify-content: space-between; }//header_top 과 header_bottom에 적응했다. .top-header .header__bottom{ margin:0 10px; } .top-header .header__column:nth-child(2){ text-align:center; } Colored by C..
Kakao Clone04 :: Tag 3day
Kakao Clone04 :: Tag 3day
2019.02.28! nav tag a href 링크를 보내준다. tab-bar__tab--selected 1 2 3 4 .tab-bar .tab-bar__tab--selected{ color:#523737; } Colored by Color Scripter cs selector가 두개이기 때문에 tab-bar 밑에 tab-bar__tab--selected에 color가 적용되는것을 알 수 있다. ! main tag ! placeholder(이미 작성된 내용) ! section tag ! header tag Context selection > header > h1~h6 ! div tag 1 2 3 4 Life is short . So live your life. Colored by Color Scripter cs div ..
Kakao Clone03 :: HTML 2day
Kakao Clone03 :: HTML 2day
2019.02.28header bottom을 만들어 본다.span? => inline element라고 소개되어진다. fa fa-cog fa-lg(크게 해주는 장치이다.)fa fa-search 이런식으로 아이콘을 찾을 수 있다. i.fa.fa-user 하고 tab을 누르면 icon 에 해당하는 태그가 뜨면서 자동으로 완성한다. *csscss에서는 .이름 { } 로 시작을 한다. padding : 10px 25px 라고 하면 (위 아래 10px, 좌 우 25px 의미)태그의 위치를 살짝 변경하고자 할때는position : relative를 사용한다. 123456789101112131415161718192021222324252627.search-bar{ padding: 10px 25px; position: relative;}..
Kakao Clone02 :: 카카오 클론 day 1
Kakao Clone02 :: 카카오 클론 day 1
2019.02.26www.w3schools.com/tags/tag_i.asp 아이콘 공수, 폰트어썸 : fontawesome.com/ bootstrap cdn font awesome : bootstrapcdn-dev-pr-747.herokuapp.com/fontawesome/ div, i, 이 2가지에 관해서 작성해볼까 한다. HTML 에서는 에 대해서 각각 태그라고 부른다. 는 주로 레이아웃을 나누는데 사용한다. 주로 와 요소가 아이콘를 표현하는데 자주 사용한다. 특히, 아이콘을 가져오는데 그냥 불러다 올순 없고 Free Font Awesome 5 icon을 사용한다면 1 cs 이런식으로 써서 아이콘을 다운로드 받지 않고 쉽게 불러다 쓸 수 가 있다. 그래서 오늘 한것은 아이콘을 추가 해봤는데 비행기, 와이파이, 달, ..
Web14 :: Element가 배치되는 방법(CSS layout)(2)
Web14 :: Element가 배치되는 방법(CSS layout)(2)
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다. 편의상 우리는 배치라고 할 겁니다. 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용합니다. 중요하게 이해해야 할 속성은 다음과 같습니다. display(block, inline, inline-block) position(static, absolute, relative, fixed) float(left, right) 이 속성을 중심으로 엘리먼트의 배치를 이해할 겁니다. 엘리먼트가 배치되는 방..
Web13 :: Element가 배치되는 방법(CSS layout)
Web13 :: Element가 배치되는 방법(CSS layout)
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 학습 목표 layout의 방식에 대해서 이해합니다. 엘리먼트는 html tag들을 말한다. 엘리먼트를 화면에 배치하는것을 레이아웃 작업이라고 한다. (=렌더링 과정) CSS display 속성에 값이 block, inline, inline-block (좌에서 우로 흐른다.) float는 기본 엘리먼트 배치에서 벗어나서 떠있는 느낌으로 * 블록으로 쌓이는 엘리먼트(display:block) block1 block2 block3 =위에서 아래로 쌓이게 된다. * inline 속성은 오른쪽으로 흐르게 한다. 옆으로 흐르는 엘리먼트. 꽉차면 오른쪽 아래로 찾아서 들어간다. * 좀 다르게 배치시키기(position 속성) 특별한 배치를 하기 위해 ..
Web12 :: CSS 기본 Style 변경하기
Web12 :: CSS 기본 Style 변경하기
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. CSS 기본 스타일 변경하기영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다. CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠. font 사이즈 변경 font-size : 16px; font-size : 1em; 배경색..
Web11 :: CSS Selector
Web11 :: CSS Selector
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. * CSS Selector 들어가기 전에 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 합니다. 특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있습니다. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보겠습니다. 학습 목표 기본적인 Selector 문법을 이해한다. *CSS Selector 트리 구조로 되어있는것을 빠르게 찾아가는 방법이다. id는 document, 즉 html 페이지에 하나만 쓰는것이 좋다. 유니크 한것. 공백으로 하면 하위에 있는 요소들을 선택할 수가 있다. CSS selector HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다..
Web10 :: 상속과 우선순위 결정
Web10 :: 상속과 우선순위 결정
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 학습 목표 CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다. 상속 : 상위에 설정된 스타일을 하위에서도 쓴다. (재사용 측면에서 훌륭하다.) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body > div{ color : green; font-size : 30px; border:2px solid slategray; padding : 30px; } my text is upper! my text is dummy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, l..
Web09 :: CSS 선언 방법
Web09 :: CSS 선언 방법
2019.01.04CSS 기본 사용법 CSS 선언 span { color : red ; } (selector, property, value) style을 html 페이지에 적용하는 세 가지 방법 inline internal external *inline HTML 태그 안에다가 넣는 방법을 우리가 inline 이라고 한다. Hello World! 같은 셀렉터로 동일한 속성 값의 어떤 다른 value를 넣었다 그러면 inline에 적용된게 최우선이다. *internal 구조와 css 섞여 있으면 안좋음. head안에 넣는다. *external 별도의 css 파일을 만들어서 include 시킨다. javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지..