본문 바로가기

전체 글63

html script 스크립트 태그로 자바스크립트 JavaScript 사용하기 자바스크립트 JavaScript는 웹 페이지의 동작을 구현합니다. html, css로 만든 웹 페이지에 대해 사용자가 취하는 동작에 대해 반응하도록 설계하는 것이 자바스크립트의 역할입니다. 자바 스크립트 예시를 테스트하기 위해 아톰 편집기를 사용하겠습니다. 새 파일을 하나 만들고 html 기본 태그를 작성합니다. 타이틀은 Java로 작성합니다. meta 메타태그로 언어 인코딩 규격 utf-8을 지정하겠습니다. 자바스크립트를 html 문법에 맞추어 사용하기 위해 스크립트 script 태그를 사용합니다. 웹 브라우저는 안 쪽에 작성되는 태그를 자바스크립트로 인식합니다. 웹 페이지에 "JavaScript is so useful!" 문장이 출력되도록 자바스크립트를 작성하겠습니다. 본문에 해당되는 문장이므로, b.. 2020. 9. 3.
html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법 스타일 태그로 각 웹 페이지에 css를 적용할 수 있습니다. body 태그에서 서식을 지정할 부분을 정합니다. head 헤드 태그 안에 style 태그를 엽니다. 선택자를 지정한 후 css 서식을 작성합니다. h1 태그로 제목으로 지정한 "Code is so useful." 부분에 서식을 적용하는 스타일 태그를 보겠습니다. width는 가로, 폭을 의미하는데 border 속성에서는 선 굵기를 의미합니다. 20px 굵기의 초록색 단선으로 만들어진 박스 테두리를 서식으로 만듭니다. display는 block level element로 적용하여 contents 가 있는 행 전부를 채우는 테두리로 둘러싸도록 하겠습니다. CSS 파일을 만들고 이 파일을 link 링크 태그로 연결하여 여러 웹 페이지에 CSS를 적.. 2020. 9. 2.
css media queries 미디어 쿼리 min-width, max-width 비교하기 미디어 쿼리는 다양한 화면에 대응하여 최적화된 반응형 웹 페이지를 만드는 유용한 코드입니다. 데스크톱 PC 화면과 모바일 버전의 화면은 크기가 다릅니다. 그리고 다양한 기종의 스마트폰은 상이한 화면 크기 설정을 사용합니다. 미디어 쿼리는 CSS로 디자인한 웹 페이지를 화면 크기에 따라 변경되어 출력되도록 돕는 코드입니다. 예시를 통해 미디어 쿼리에 대해 알아보겠습니다. 예시로 기본 코드를 작성하겠습니다. 먼저 가장 상위 개념으로 html 태그를 작성합니다. 이 html 문서가 가진 문자 속성 및 CSS 서식을 적용할 head 헤드 태그를 만듭니다. head 헤드 태그에는 title 태그, meta 메타 태그, style 스타일 태그가 포함됩니다. title은 웹 문서의 제목으로서 "Media Qureie.. 2020. 9. 1.
CSS Grid 그리드 기초 간단히 익혀보기 CSS Grid 템플릿을 이용해 웹 페이지 레이아웃 편집하기 아래와 같이 예제 태그를 작성합니다. body 영역에 Text Sample 3개를 각각 Div 태그를 지정합니다. 3개의 Div 태그를 묶는 개념의 부모 태그로 Div 태그를 쓰고 id를 "grid"로 지정합니다. 3개의 Div 태그에 굵기 5px 노란색 단선을 적용합니다. style 태그에 Div 태그를 선택자로 지정한 후 서식을 작성합니다. Text Sample.1 Text Sample.2 Text Sample.3 grid 템플릿을 이용해 이 3개의 박스를 하나의 영역으로 포함하여 나란히 일렬로 배치하기 노란색 테두리 선으로 둘러싸인 3개의 박스가 만들어졌습니다. 이 3개의 박스를 하나의 개념으로 묶기 위해 상위 개념의 div를 만들었으며,.. 2020. 8. 31.
DIV , P , SPAN 태그로 웹 디자인을 위한 contents 그룹핑하기 디비전 DIV 태그는 "분할하다"는 의미를 가진 Division의 약자입니다. DIV 태그는 웹 페이지의 레이아웃 디자인을 위한 태그입니다. DIV태그로 contents를 감싸게 되면, contents는 디자인을 위한 특정한 영역으로 별도 지정이 됩니다. 지정된 영역은 웹 페이지의 레이아웃 상에서 다양한 위치로 배치될 수 있습니다. DIV 태그는 block level element 로서 contents가 포함된 행의 화면 양 끝에 이르는 모든 영역에 적용됩니다. contents HTML1, HTML2, HTML3에 각각 DIV 태그를 적용해보겠습니다. DIV 태그만 사용해도 자동으로 줄 바꿈이 됩니다. DIV 태그는 margin 값을 0으로 갖고 있습니다. 연속해서 DIV 태그를 사용하면 빈 간격 없이 .. 2020. 8. 30.
html CSS border 속성 property 사용하여 웹 페이지 라인 꾸미기 border 속성 property 활용하여 박스가 아닌, 하나의 선 만들기 유투버 생활코딩님의 2017년 10월 영상 중 "CSS-9. 박스 모델 써먹기"를 보고 실습을 해 보았습니다. 예제를 위해 아래와 같이 기본 태그를 작성합니다. 테두리를 작성하는 것이기 때문에 앵커 링크 태그는 생략했습니다. 제목 부분은 글자 크기는 45px으로 가운데 정렬합니다. WEB HTML CSS JavaScript border-bottom 속성으로 아래쪽 선 긋기 영역 WEB이라는 텍스트 아래 화면 양 끝을 채우는 선을 만들겠습니다. 마진 margin:0 속성 입력하여 줄 간격 제거하기 WEB 아래 지정한 속성의 선이 생겼습니다. 선과 1.HTML 이하 내용 사이에 여백도 자동으로 보입니다. 빨간 점선으로 표시해놓은 영역.. 2020. 8. 30.
CSS 박스 모델 개념 margin, border, padding, width, height 테두리를 구성하는 border 속성 property 태두리를 만들기 위해 우선 기본 html 코드를 작성합니다. 본문에는 Test box-1, Test box-2를 작성하고 태그를 사용해 제목으로 처리해 놓습니다. 다음으로 태그에 태그에 대한 태그를 작성합니다. 테두리 선 굵기는 10px, 선 색상은 파란색, 선 모양은 일반 단선으로 합니다. border: 속성 property에 대한 값 value로서 5px, blue, solide로 입력하면 됩니다. 테두리 박스 안 여백을 조정하는 padding 속성 property 테두리 박스 안 쪽에 여백을 만들기 위해선 padding: 속성 property가 필요합니다. 속성 값은 20px로 합니다. Test box-1 Test box-2 줄 간격을 조정하는 m.. 2020. 8. 29.
<style> 태그에 선택자 comma [ , ] 로 정렬하여 동시에 서식 적용하기 CSS style tag에 comma를 이용해 적용할 타깃 합치기 스타일태그에 제목, 앵커 링크 부분 등 따로 적용해 놓은 서식이 동일한 경우를 가정해보겠습니다. 이들의 선택자를 하나의 개념으로 묶어 지정한 서식이 동시에 적용되게 할 수 있습니다. 바로 comma [ , ]를 이용하는 것입니다. 아래 예시를 살펴보겠습니다. 태그의 제목 부분과 앵커 링크 태그 부분에 파란색 테두리를 만들겠습니다. 테두리는 적용되는 태그 행의 화면 전체에 적용되는 block 타입이 아니라, 자신의 텍스트 크기만큼 그려지도록 inline으로 display 값을 입력하겠습니다. 테두리 선은 일반 단선으로 하겠습니다. Coding Coding is useful. 스타일태그의 h1 선택자 이하 부분과 a 선택자 이하 부분이 중복되.. 2020. 8. 29.

티스토리툴바