글

프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

-
이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v
댓글 쓰기
자세한 내용 보기

구글 폰트 적용하기

-
이미지
구글 폰트를 적용하는 방법이다. 1. 구글폰트 사이트에 접속한다. https://fonts.google.com/ 접속하면 여러가지 폰트들이 있다. 하나의 폰트를 선택하고 다운로드 혹은 웹에서 사용할 수 있는 웹폰트를 적용해본다. 2. 폰트 적용하기(폰트 확인하ㄱ 예시로, Language 애서 한국어 를 선택하고 리스트된 폰트 중 하나를 선택한다. 해당폰트의 Glyphs 탭에서는 지원언어를 확인할 수 있고, 언어별 폰트 미리보기가 가능하다. Type tester 탭에서는 폰트를 미리 타이핑 해볼 수 있다. 3. 폰트 다운로드 Get font 버튼 클릭! 여기서는 폰트가 설치되어있지 않아도 폰트를 적용할 수 있는 웹폰트 방식으로  설치를 해본다. 즉, 유저의 PC에 해당 폰트가 없어도 링크방식으로 해당 폰트를 사용할 수 있다.  <>Get embeded code 를 선택한다. 브라우저 웹폰트를 적용하기 위해서 Web 탭에 link, @import 둘중 하나를 선택한다. 여기서는 link 로 진행한다. 4. 웹 폰트 적용하기 - link 요소는 head 태그 사이에 붙여넣고, CSS 스타일은 <style>태그를 만들어서 붙여넣는다. 여기서 스타일시트는 내부스타일시트 방식을 사용했다. 상황에 따라 외부스타일시트 방식을 사용할 수도 있다. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > web font </ title >   < link rel = "preconnect" href = "https://fo
댓글 쓰기
자세한 내용 보기

CSS속성 선택자 사용법

-
이미지
CSS속성 선택자 는 HTML 속성을 선택할 수 있는 선택자 타입이다.  syntax [ 속성 = "속성값"] { 스타일 } [] 사이에 속성 혹은 속성="속성값" 을 주면, 해당 속성을 가진 HTML요소들에 스타일을 정교하게 설정할 수 있다. <! DOCTYPE html > < html > < head > < style > [ target ] {   background-color : yellow ; } </ style > </ head > < body > < h2 > CSS [attribute] Selector </ h2 > < p > The links with a target attribute gets a yellow background: </ p > < a href = "https://www.w3schools.com" > w3schools.com </ a > < a href = "http://www.disney.com" target = "_blank" > disney.com </ a > < a href = "http://www.wikipedia.org" target = "_top" > wikipedia.org </ a > </ body > </ html > 위 소스에서는  target 이라는 속성을 가진 요소만 선택하기 위해서 속성 선택자를 선언했다. 결과는 예상했던것 처럼, target 속성이 설정된 두개의 하이퍼링크 텍스트에만 스타일이 적용된다. target 속성에만 설정된 스타일 [] 앞에 태그 혹은 클래스, 아이디 를 같이 사용할 수도 있다. 위 코드는 하기와 같이 응용이 가능하다. < head >
댓글 쓰기
자세한 내용 보기

CSS 클래스 선택자 사용법

-
이미지
CSS 클래스 선택자는  HTML class 속성값이 선택자와 동일한 경우 해당 요소에 스타일을 적용하는 방법이다. 하나의 HTML 문서내 동일한 class 속성값이 여러개 있다면 동시에 스타일 적용이 가능하다. syntax .class속성값{ 스타일 } < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     #content {       color : brown ;     }     .dummy {       color : blueviolet ;     }   </ style > </ head > < body > < h1 > 클래스 선택자 </ h1 > < p id = "content" > 문단의 시작점 입니다. </ p > < p class = "dummy" > 클래스 선택자는 선택자로 설정된 클래스 속성값 과동일한   요소들에 스타일이 적용된다 </ p > < div class = "dummy" >   Lorem Ipsum is simply dummy text of the printing   and typesetting industry.   Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s, </ div > </ body > </ html > 위 코드에서는 dummy 라는 class 속성값을  가진 요소
댓글 쓰기
자세한 내용 보기

CSS id 선택자 사용법

-
이미지
CSS id 선택자는  선택자로 지정한 id 가 HTML 태그 id속성과 일치하는 요소에만 스타일을 적용할 수 있다. syntax #id{ 스타일 } 소스를 보자 <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     #content {       color : brown ;     }   </ style > </ head > < body > < h1 > 아이디 선택자 </ h1 > < p id = "content" > 아이디 선택자는 해당 아이디를 가진 요소에만 스타일이 적용된다. </ p > < p > 아이디 선택자는 하나만 설정이 가능하다. </ p > </ body > </ html > #content 라는 id 속성을 가진 HTML 요소를 찾는다. 참고로, HTML id 속성값은 하나의 웹 문서에서 고유한 식별값을 가진다. content 라는 id를 해당 요소에서 사용했다면, 다른 요소들은 해당 아이디를 가지면 안된다. HTML 가이드 문서에서도 이렇게 나와있지만, 브라우저에서 id 속성값을 중복으로 지정해도 설정이 된다. 조금 이상하다. 하지만, 표준은 아니기에 이렇게 쓰면 안될거 같다. [아이디 선택자를 브라우저에서 실행한 결과]  
댓글 쓰기
자세한 내용 보기

CSS 태그 선택자 사용법

-
이미지
CSS태그 선택자는 선택자로 명시된  모든 태그 요소에 스타일을 적용할 수 있다. Syntax 이다. Tag{ 스타일 } <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     p {       color : brown ;     }   </ style > </ head > < body >     < h1 > 태그 선택자 </ h1 >     < p > 태그 선택자는 태그명과 일치하는 요소에 스타일을       적용할 수 있다. </ p >     < p > 두번째 문단에도 스타일이 적용된다. </ p >   < body > </ html > 태그를 사용하여서  손쉽게 특정요소 들에 접근 할 수 있는 장점이 있다. 위 예제에서는 p요소들에 색상을 지정한다. 브라우저에 적용된 태그 선택자
댓글 쓰기
자세한 내용 보기

CSS 전체 선택자 사용방법

-
이미지
CSS 전체 선택자는 HTML 문서 전체에 스타일을 적용할 수 있는 선택자 타입이다. Syntax 는 다음과 같다. * { 스타일  } 소스를 보자 <! D OCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     * {       color : brown ;     }   </ style > </ head > < body > < h1 > 전체 선택자 </ h1 > < p > 전체 선택자는 모든 요소에 스타일을 적용할 수 있다. </ p > </ body > </ html > * 이 모든 요소를 가리킨다는 의미이다. 전체선택자로 인해서  h1, p 태그도 색상이 수정되었지만, 위 문서에 보이는 모든 태그 와 요소에 스타일이 적용이 된다. 웹브라저에 실행한 결과는 아래와 같다.
댓글 쓰기
자세한 내용 보기

CSS 를 HTML에 적용하는 방법

-
이미지
CSS를 HTML에 적용하는 방법에는 3가지가 있다. 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 이다. 1. 내부스타일 시트 HTML에서 제공하는 style 태그를 사용한다. style 태그안에 스타일시트를 선언한다.  < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     h1 {       color : royalblue ;     }   </ style > </ head > < body >   < h1 > 내부 스타일 시트 적용 텍스트 입니다. </ h1 >   </ body > 선택자 로 h1 을 그리고 선언부에는 컬러값 을 주었다. h1 요소의 컬러 를 royalblue 로 설정하라는 의미 이다. style 요소의 위치는 일반적으로 head 영역에 두어서, body 영역의 html요소들에 스타일을 적용한다. 이는 위에서 아래로 내려오면서 문서를 분석하는 브라우저 엔진의 특성 때문이다. 2. 외부스타일 시트 동일한 코드를 외부스타일 시트로 바꾸어본다. HTML문서는 훨씬 간결해진 모습이다. [index.html] < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < link r
댓글 쓰기
자세한 내용 보기

자바스크립트 로그인 폼 만들기

-
이미지
로그인 폼을 만들어 본다. 아이디 와 패스워드를 입력하는 필드가 있고, 서버 전송을 위한 submit 버튼이 있다. 소스를 보자. < body >   < form action = "#" >     < fieldset >       < legend > 로그인 </ legend >         < input type = "text" placeholder = "id" name = "input_id" >         < br >         < input type = "password"   placeholder = "password" name = "input_pw" >         < input type = "submit" value = "login" >     </ fieldset >   </ form >     < script >     //forms 에 이벤트 리스너를 등록한다.     //submit 이벤트가 발생시 리스너 함수를 실행한다.     document . forms [ 0 ]. addEventListener ( "submit" , function (){           const id = document . forms [ 0 ]. input_id ;       // console.log(`${"id is" + id.value}`);       if ( id . value . trim ()== "" ){ //입력된 값이 없다면         alert ( "id 를 입력하세요" );         id . focus ();
댓글 쓰기
자세한 내용 보기

자바스크립트 document.form 이란?

-
이미지
document.form  은 자바스크립트에서 문서에 포함된 모든 <form> 의 HTMLcollection 을 반환하는 속성 이다. 소스를 보자. < h1 > The Document Object </ h1 > < h2 > The forms Property </ h2 >   < p >< form id = "myCarForm" >   Favorite Car: < input type = "text" name = "fname" value = "Volvo" >   </ form ></ p >   < p >< form id = "myColorForm" >   Favorite Color: < input type = "text" name = "favcolor" value = "Blue" >   </ form ></ p >   < p > The name of the form elements in the document are: </ p >   < p id = "demo" ></ p > < script >   const forms = document . forms ;   let text = "" ;   for ( let i = 0 ; i < forms . length ; i ++) {     text +=   forms [ i ]. id + "<br>" ;   }   document . getElementById ( "demo" ). innerHTML = text ; </ script >
댓글 쓰기
자세한 내용 보기

자바스크립트 이벤트리스너 등록하기

-
이미지
  자바스크립트 에서 이벤트 처리 하는 방법 중 하나인 이벤트리스너 등록 편이다. 코드를 보자.   < button > Click </ button >   < script >       const button = document . querySelector ( "button" );     button . addEventListener ( "click" , alertPopup );     function alertPopup (){       alert ( "button click" );     }   </ script > H5 요소로 버튼을 만들었고, 자바스크립트에서는 버튼을 선택자로 접근하였다. 그리고 하기 Syntax 로 이벤트가 등록된다.  요소.addEventListner( "이벤트 타입" , 이벤트 처리 함수 ) "이벤트 타입" 에는 on을 제거한 이벤트 명을 적는다. 앞선 포스팅에서 HTML 속성과 요소의 속성으로 이벤트를 등록할때는 on이벤트 명이였다. 자바스크립트 이벤트 만들기 - 인라인 방식 자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기 그리고, 함수는 () 괄호를 넣지 않도록 주의해야 한다. 이벤트리스너를 활용해서 더블클릭 이벤트를 구현하면 하기와 같다.     const doubleButton = document . querySelector ( "button" );     doubleButton . addEventListener ( "dblclick" , alertPopup );     function alertPopup (){       alert ( "double button click" );     } 그러면 이벤트 명을 모두 외워야 하나? 그렇지 않다. 필요한 이벤트가 있다면 웹 검색을 통해서 찾으면 된다. 버튼에 더블이벤
댓글 쓰기
자세한 내용 보기

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

-
이미지
 구글 블로그에서 복사 붙여넣기로 이미지 삽입이 가능한지 테스트 해보았습니다. 1. 윈도우를 사용하신다면,    윈도우키+Shift+S 로 화면캡쳐 한 후, 구글 블로그 글쓰기 창에 CTR+V 로 붙여넣기 하면    하기 처럼 이미지 가 복사 됩니다 복사된 이미지를 마우스로 선택하면 하기처럼 하단에 서브메뉴가 나옵니다 복사 붙여넣기 한 이미지 좌측 3개는 이미지 정렬 메뉴 이며, 4번째는 이미지 크기 조정 메뉴 입니다. 해당 메뉴를 사용해도 되고, 위 처럼 마우스 클릭시 나타난 작은 네모박스 등을 마우스 드래그로 크기를 직접 조정해도 됩니다. 하지만 주로 업로드 실패 에러가 뜹니다. 이는 공식적으로 구글 블로그에서 이미지 복사 붙여넣기 기능을 지원하지 않는 다는것을 의미 합니다.  이미지 삽입은 공식적으로는 상단 이미지 삽입 아이콘을 통해서  이루어져야 합니다.  구글 블로그는 티스토리 에 비해서 이런 점들이 불편한거 같습니다. 블로그에 안착하면서 하나씩 개선 방법을 찾아봐야 겠습니다. 감사합니다.
자세한 내용 보기

HTML 페이지 기본 구성.(HTML Page Structure)

-
이미지
HTML 기본 구성. HTML 문서는 기본적으로 <html>요소 사이에 <head><body> 를 담고 있다. 이게 가장 큰 구조 이다. 먼저 <head></head> 요소는 브라우저에 나타낼 정보를 표기 한다고 생각하면 된다. <title>요소는 브라우저의 타이틀 바 혹은 페이지 탭에 보여지는 제목이다. 하기 빨간 네모박스 부분이라고 생각하면 된다. <body></body>요소 안의 컨텐츠는 브라우저 화면에 보여지는 부분이다. 위 그림에서 My First Heading 과 My first paragraph 부분이 되겠다. 위 그림에 나오는 웹 페이지를 코딩하면 하기와 같다. HTML에서 가장 기본이 되는 문법단위인 태그에 대해서 한번쯤은 생각해 볼 필요가 있다. 태그란 무엇인가에 그리고 HTML은 어떻게 공부하는 것이 좋을것인가 대해서는 하기글에서 이야기 해보자. HTML 태그란 무엇인가?
자세한 내용 보기

구글 블로그 대표이미지 설정하기

-
이미지
구글 블로그에서 대표 이미지를 설정 하는 방법을 알아봅니다. 글을 적으면, 자동으로 글에 포함된 첫번째 이미지가 대표 이미지로 설정됩니다. 다른 이미지 로 변경하고 싶다면 어떻게 해야될까요? 여기서는 위 파란색 네모 박스의 이미지를 설정해봅니다. 먼저 이미 대표 이미지가 설정된 글로 이동 후 수정모드 로 들어갑니다. 편집모드를 HTML 로 변경 합니다. 해당 페이지에는 이미 대표이미지 로 설정될 이미지 엘리먼트가 들어있습니다.  여러분들이 처음 만들때는 대표이미지 로 사용될 이미지를 '새 글쓰기' 로 업로드 한뒤 html 모드로 변경한뒤 이미지 코드를 확인 해야 합니다. 이미지 소스는 각자 다 다르겠죠.  대표이미지로 설정을 위해서는 해당 코드가 첫줄에만 있어야 합니다.  왜그런지는 정확히 잘 모르겠습니다.  이미지가 글 내부에서는 보이지 않고, 썸네일 이미지에만 보이기 위해서  Style 속성값을 줍니다. 이미지를 보이지 않겠다는 뜻 입니다. 해당 코드를 복사 한뒤, 여러분이 원하는 글로 이동합니다.  글을 HTML 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다. 첫줄에 붙여넣기 가 완료 되었습니다. 저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다. 썸네일이 잘  업데이트 되었네요. 감사합니다.
자세한 내용 보기