생각하며 글을 쓰는 사람

기본적으로 웹페이지에 폰트를 적용하는 방법 구글 폰트를 사용하면 편합니다. 구글 폰트에 들어가서 임포트 하면 됩니다. @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); body { font-family: 'Do Hyeon', sans-serif; } 만약에 사용자의 컴퓨터에 폰트가 없고, 호스팅된 내 하드의 폰트를 사용하고 싶다면? @font-face { font-family : '내가원하는이름'; src : url(../font/nanumsquare.ttf) } 웹폰트용 woff파일 웹폰트용으로 나온 woff 파일이 있습니다. ttf에 비해 용량이 3분의1 수준입니다. 한글폰트 ttf 파일은 용량이 매우 큽니다...

css 코드를 짜다보면 필요없는 중복을 많이 하게 됩니다. 그리고 코드가 길어질 경우에 엉망이 됩니다. 그런 경우에 OOCSS(Object Oriented CSS) 방식을 사용 해주시면 됩니다. 1. 버튼의 기본 스타일인 padding, font-size 이런걸 정의하는 class를 하나 만들기 2. 버튼에 스킨 색깔놀이 하는 용도의 class를 여러개 만들기 .main-btn { font-size : 20px; padding : 15px; border : none; cursor : pointer; } .bg-red { background : red; } .bg-blue { background : blue; } 확인버튼 취소버튼 색갈별로 분리를 해주면 좋습니다. .bg-red { background : ..

css pseudo-class 를 공부하기 이전에 버튼을 하나 만들어 보겠습니다. 제출하기 .btn { padding: 15px; font-size: 25px; border: none; border-radius: 10px; font-family: 'Do Hyeon', sans-serif; background-color: tomato; color: white; cursor: pointer; } .btn:hover { background-color: brown; } .btn:focus { background-color: rgb(88, 88, 88); } .btn:active { background-color: rgb(255, 0, 0); border: 1px solid black; } pseudo-class..

html에서 테이블을 쓰려면 div > table > tr > td 만 아시면 됩니다. tr은 행을 만들고, td는 열을 만들게 됩니다. 그리고 table 태그를 사용할 때는 div 태그 안에 넣어주면 좋습니다. 더 자세하게 정리를 한다면~~ table태그 내에 tr은 row, td는 column을 의미하게 됩니다. 그리고 먼저 tr을 사용하고 그 안에 td를 써야 합니다. tbody, thead는 그냥 헤드부분 영역구분을 위해 사용합니다. td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리됩니다. 그리고 리셋 css는 꼭 설정을 해주셔야 합니다. 1 2 3 이름 직책 특기 갤럭시 개발자 치킨먹기 td, th { border: 0.5px solid black; } 테이블 셀 내에서 상하정렬할 ..

html 예제를 작성 해보겠습니다. 아래의 그림과 같은 양식을 form과 input을 이용하여 작성을 해봅니다. div, input, textarea 에 대해서 먼저 설정을 할 것이 있습니다. border-box 를 먼저 설정을 해야 합니다. 왜야하면 css에서 크기를 설정할 때 원하는 크기를 얻으려면 테두리와 안쪽 여백을 고려해야 합니다. box-sizing: content-box; 를 설정하고 폭을 100% 한 이후에 패딩을 주면 우리가 설정한 예상 범위를 넘어가 버립니다. 그래서 box-sizing: border-box; 를 주어야 합니다. div, input, textarea 에 먼저 box-sizing: border-box; 를 설정해줍니다. div, input, textarea { box-si..

form태그 input태그는 닫지 않습니다. 인풋태그에는 여러가지 옵션이 있습니다. input의 type 가장 많이 사용이 되는 옵션 들입니다. 종류가 여러가지가 많이 있습니다. 암기를 하시려고 하면 안됩니다. 구글에서 필요할 때 검색을 해서 찾아서 쓰면 됩니다. 옵션1 옵션2 옵션3 input에 넣는 속성들 placeholder는 배경 글자입니다. 흐릿한 회색으로 보입니다. value는 미리 입력된 값입니다. name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다. HTML의 셀렉터 HTML의 속성으로 CSS셀렉터를 사용할 수 있습니다. input의 type속성이 text인 요소만 찾아서 스타일을 줄 수 있습니다. 폼에서 특히 유용하게 사용합니다. 마진, 패딩, 글자 크기 등을 자유롭게 줄 수..

CSS normalize html, css 코딩을 하다보면 문제가 생깁니다. 같은 코드를 짜도 다른 브라우저에선 이상하게 보일 수 있습니다. 브라우저마다 의 스타일이 다르고, 가끔 line-height 이런 줄간격같은 것도 다르고 다음 시간에 배울 사이즈도 다르기 때문입니다. 브라우저간 통일된 스타일을 줘야합니다. 특정 옵션을 css 맨 위에 적고 코딩을 시작해야 합니다. CSS Normalize 링크 : https://github.com/necolas/normalize.css/blob/master/normalize.css 그래서 이 링크는 CSS normalize 라고 만든 문서입니다. 여기있는 스타일 붙여넣으시면 브라우저간 다르게 보이는 문제들을 미리 해결할 수 있습니다. 그래서 여기 있는 스타일을 ..

body에는 설정하지 않아도 margin이 들어있습니다. 제거를 시키려면, 설정을 해줘야 합니다. 이러한 설정 말고도 reset css를 이용하면 좋습니다. 좌표이동 css에서 좌표이동을 할 수 있습니다. position을 이용하는 것입니다. positon은 원하는 것을 공중에 띄워서 좌표이동이 가능하게 하는 겁니다. 먼저 좌표에 대해서 살펴보면... .box { top : 20px; left : 30%; } top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 이 좌표속성을 사용하려면 position 속성이 필요합니다. position 속성은 좌표속성을 적용할 기준점을 지정해주는 역할입니다. .something { position : static..

navbar 안에 있는 모든 li 에 적용하고 싶다면... 스페이스바를 이용하면 됩니다. .navbar li { display : inline-block; } navbar 안에 직계 자식에게 적용하고 싶다면, > (꺾쇠괄호) 를 쓰면 됩니다. .navbar>li { display : inline-block; } a(링크) 태그에서 밑줄을 제거하고, 방문시 보라색으로 변경되는 것 제거하기 링크 .link { text-decoration : none; } .link:visited { color : black; } css로 배경넣기 .mainBack { width: 100%; height: 500px; background-color: rgb(18, 128, 172); background-image: url(/..

이번글에서는 css - display : inline-block을 사용해보겠습니다. 이전에 블로그 글에서 가로로 정렬할 때 float : left 를 사용했습니다. 그러나 이것만 쓸 수 있는 것은 아닙니다. 지금 만들 것은 아래와 같은 레이아웃을 만들어 보도록 하겠습니다. display : inline-block 을 content와 menu에 넣어주면 됩니다. display : inline-block을 사용 .container { width: 800px; } .header { width: 100%; height: 50px; background-color: rgb(100, 237, 123); } .content { width: 80%; height: 400px; background-color: coral;..

그림자를 그리는 방법 그림자를 그리는 방법은 box-shadow 속성을 이용하는 것입니다. 아주 간단합니다. 안녕하세요 개발자 입니다. .card__box { width: 400px; height: 300px; background-color: rgb(21, 93, 156); margin-left: auto; margin-right: auto; font-size: 30px; border-radius: 20px; color: white; display: flex; justify-content: center; align-items: center; box-shadow: 10px 10px 15px 5px rgb(109, 109, 109); } 위의 css의 코드에서 box-shadow만 주목을 하시면 됩니다. 5..

이번 글에서는 css에서 자주 사용하는 속성에 대해서 정리를 하겠습니다. .myBox { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 박스의바깥 여백을 지정합니다. padding은 박스 내부의 안쪽 여백을 지정합니다. border는 테두리 (차례로 두께, 선의 종류, 색상)를 넣을 수 있습니다. border-radius는 테두리 둥글게 처리하는 기능입니다. 가운데 정렬 >> display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다. margin-top : 20px; padding-left : 30px; top, left, bott..

html 태그에는 두가지 종류가 있습니다. Block(블럭) 과 Inline(인라인)이 있습니다. 옆에 다른 요소가 못 오는 걸 block라 부르고, 다른 요소가 올 수 있는 걸 inline이라고 부릅니다. div, header, main, section, footer, article, address, p 등은 block 입니다. inline 은 옆으로 간다. 종류에는 span, link, image, a : 그림, 링크 그림들이 이에 해당합니다. 만약 block 을 가운데로 정렬을 하고 싶다면, 아래와 같은 코드를 작성하면 됩니다. .클래스선택 { width: 300px; margin-left: auto; margin-right: auto; } 꼭 width 폭을 지정해줘야 합니다. 왜? 해보면 알게 ..

이번 글에서는 이미지와 글자를 스타일 하는 방법에 대해서 정리를 하겠습니다. html 안에서 스타일을 해보도록 하겠습니다. ( 원래는 css를 따로 빼지만 html과 함께 작업이 가능합니다. ) 간단하게 CSS 스타일 넣는 방법에 대해서 정리를 하겠습니다. 글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다. 거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다. 여러개를 css 속성값을 넣을 수 있습니다. 그리고 속성값을 많이 쓰게 된다면... 세미콜론을 꼭 한 속성이 끝날 때 마다 넣어 줘야 합니다. 자주 사용하는 글자 스타일들 font-size : 10px; /* 폰트의 크기를 설정 */ font-family : 'gulim'; /* 폰트 서체를 설정 */ lette..

HTML의 기초와 태그로 글을 작성하는 법을 정리 해보겠습니다. 웹사이트를 제작하고 만들고 싶을 때 사용한다고 할 수 있습니다. 세상에 존재하는 모든 웹페이지는 html, css, javascript로 동작합니다. HTML은 Hypertext Markup Language의 약자인데 Markup Language(마크업 랭기지)에 주목해주시면 됩니다. 마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다. 여기는 menu고, main이고, 여기는 footer라고 표시를 하는 것입니다. 웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 동영상을 넣고 등등의 .. 자료를 입력합니다. 기업용 홈페이지든, 우리가 많이 쓰는 유튜브 싸이트, 커뮤니티 사이트, 쇼핑몰도 여기에 해당한다고 볼 수 있습니다. 그 자료..