소상공인 감자네

웹페이지를 CSS 로 꾸미다 보면 HTML 요소들을 다양하게 활용해야 하는 경우가 생긴다.그 중 하나가 바로 테두리를 만듬으로 시각적으로 구획을 짓거나 버튼의 모양들을 다듬는 작업을 하게 된다. 그 HTML 요소들의 테두리를 만들어 디테일을 살리는 속성이 바로 Border 이다. border 속성은 단순한 선 같지만 실제로는 다양한 속성을 통해 만들어 진다. 1. 스타일 (border-style)border-style은 테두리를 실제로 보이게 하는 가장 중요한 속성이다.이 속성이 없으면 다른 설정을 하더라도 테두리가 보이지 않는다./* none: 기본값, 테두리 없음 */.box1{ border-style: none;}/* solid: 실선, 가장 일반적으로 사용된다. */.box2{ border-s..

웹사이트를 구성하는 HTML 의 각 요소들은 보이지 않는 상자(Box) 안에 존재한다고 할 수 있다.그럼 그 상자들의 사이즈는 어떻게 조절을 할 수 있을까? 상자의 크기는 너비를 표현하는 width 와 높이를 표현하는 height 를 통해 자유롭게 조절할 수 있다.웹사이트의 기본적인 크기의 단위인 px을 통해 값을 지정해 주면 된다.div { width: 200px; height: 200px; background: red;}span { width: 100px; height: 100px; background: blue;}"> 또한 %를 사용해서 상대적 크기를 지정할 수 있다.%를 사용하게 되면 부모 요소의 크기를 기준으로 비율을 지정하게 된다.// 부모 요소의 크기를 지정.parent { w..

웹사이트를 방문할 때 가장 먼저 눈에 띄는 것 중 하나가 바로 글씨.멋진 디자인들을 뒷받침 해주려면 그에 맞는 글꼴 디자인이 필요하다. 글꼴을 다양하게 변경해주는 CSS 속성들을 알아보도록 하자. 1. 폰트 종류(Font Family)font-family 속성은 텍스트에 적용할 글꼴을 지정한다.여러개의 글꼴을 나열 할 수 있으며, 컴퓨터는 그 순서에 따라 글골을 찾아 적용한다.만약 첫 번째 글꼴이 없으면 다음 글꼴을 사용하는 방식이다.p { font-family: "Pretendard", Arial, sans-serif;} - 가장 먼저 "Pretendard" 글꼴을 찾는다.- 만약 "Pretendard" 가 없으면 Arial 을 사용한다.- 두 글꼴이 모두 없다면 컴퓨터에 기본으로 설치된 '고딕체' ..

웹페이지를 CSS를 이용해 만들기 시작하면서 고민되는 것들 중 하나가 요소들의 배치다.기본적인 display 속성들로 배치를 하다보면 조금 마음에 안드는 부분이 생기기도 하는데,그 배치를 조금 더 편리하고 유용하게 해주는 속성이 바로 flex 다. Flexbox 는 유연하게 HTML요소들을 배치할 수 있는 도구이다.flex 이전 방식으로는 가운데 정렬이나 나란히 간격을 둔 배치 등이 매우 까다로웠지만,Flexbox가 등장하면서 상당히 쉽게 해결되었다. Flexbox는 기본적으로 '부모 - 자식' 관계를 기반으로 작동한다.그래서 이 관계를 이해하는 것이 flex를 이해하는 시작이라고 볼 수 있다. ◼ 플렉스 컨테이너 (Flex Container)Flexbox의 부모요소로 display : flex; 로 사..

본격적으로 자바스크립트를 활용해서 코딩을 하다 보면 점점 길어지는 코드 길이를 만나게 될 것이다.똑같은 행동을 하기 위해서도 작성된 코드를 다시 작성해야 하는 일들이 생기기 시작할텐데,그런 작업들을 획기적으로 줄여 줄 수 있는 것이 바로 함수(Function)다. 함수(Fuction)를 쉽게 설명하자면 특정 작업을 수행하는 코드의 묶음이라고 할 수 있다.미리 정해진 일을 수행해주는 것이라고도 설명할 수 있겠는데, 미리 정해진 코드를 간결하게 실행 할 수 있다. 예를 들어,"안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다."라는 메세지를 모든 신입생 이름을 넣어서 보여준다고 생각하자. 그럼 아마도console.log("안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다.");conso..

웹페이지를 만들려면 HTML로 구조를 만들고 CSS를 통해 레고처럼 위치를 잡고 쌓는 과정을 해야한다.잘 만들어진 웹페이지들은 바로 이 HTML 요소들을 제각각 규칙에 맞게 배치한 결과라고 할 수 있다. 그 규칙을 만들게 도와주는 CSS 속성이 바로 Display. displaydispaly 속성은 HTML 요소가 화면에 어떻게 보여지고 주변 요소들과 어떤 상호작용을 할지를 결정한다.요소 하나하나 성격을 정의한다고 보면 되는데 모든 HTML 요소들은 기본적으로 display 속성을 가지고 있다. display를 처음 만나기 위해 가장 기본적이고 대중적인 세가지 요소를 먼저 알아보자. 1. display : block;block(블록)이라는 이름 답게 이 값은 HTML요소를 하나의 커다란 벽돌 처럼 취급한..

웹페이지를 좀 더 다채롭게 꾸며주는 CSS.CSS에서 가장 기초가 되는 속성 중 하나인 Position 에 대해서 알아보자. Position은 웹페이지의 요소들을 원하는 위치에 정확하게 배치하고 싶을때 사용한다.마치 물건을 옴기듯이 요소를 이동하여 다른 요소와 겹치거나 혹은 화면의 특정 위치에 고정시킬 수도 있다. 그 중 가장 많이 사용되는 3가지 값들을 알아보자. 1. relative (상대적 위치)div { position : relative;} relative는 요소의 원래 위치를 기준으로 위치를 이동시키는 속성이다.이 속성을 사용하면 세부 속성인 top, bottom, left, right 들이 작동하기 시작한다.예를 들어div { position : relative; top : 30px;}..

웹페이지를 풍성하게 만드는데 필요한 것 중 하나가 바로 JavaScript 이다.우리가 흔히 웹사이트에서 하는 행동들은 거의 대부분 자바스크립트를 이용한다고 생각하면 될 정도. 어떤 영역을 클릭하면 나오는 반응이나 현상, 움직이는 이미지나 계속 롤링되는 페이지 등.많은 영향을 주는 것이 바로 자바스크립트다. 쉽게 웹사이트의 구조를 설명하자면, HTML 은 큰 뼈대와 틀을 의미하고CSS 는 모양과 색감을 다양하게 만들어 주며JavaScript 가 페이지를 살아 움직이게 한다. 라고 볼 수 있다. 결국 웹페이지를 우리가 생각하는 웹페이지로 완성시키는게 자바스크립트라고 볼 수 있다.만약 자바스크립트가 없다면 웹페이지는 단순 정적인 문서에 불과할 것이다.어떤 버튼을 눌러도 동작하지 않고, 사진도 움직이지 않을 ..

웹에 대해 기초적인 정보를 알아가다 보면 필연적으로 HTML과 HTML을 구성하는 태그(tag)를 알게 된다.웹페이지는 HTML 안에서 태그를 사용해 영역을 만들고 기능을 불어 넣어 구성된다.하지만 보통 영역을 나눌 때 큰 의미가 없는 태그 중복하여 사용해왔다.그렇게 되면 해당 영역이 어떤 용도로 사용되고 있는지 확인하려면 내용을 자세히 들여다 봐야만 했다. 하지만 HTML5가 등장하면서 변화가 생겼는데 그것이 바로 "시멘틱(Semantic) 태그"이다.시멘틱(Semantic)은 "의미가 있는"이라는 뜻을 가졌다.그래서 시멘틱 태그를 "의미를 알 수 있는"태그 정도로 생각하면 된다.말 그대로 태그 자체가 의미를 내포한다고도 볼 수 있는데,웹페이지에서 머릿말, 본문, 네비게이션 등 영역을 나눌 때 기존에..

웹페이지의 뼈대를 이루는 HTML이 있다면,뼈대에 살을 붙이고 색칠을 해 더욱 풍성하게 만들어주는 것이 바로 CSS다. CSS(Cascading Style Sheets)Cascading 는 '계층적'이라는 의미를 하는데, 우리가 뼈대로 살펴본 HTML과 유사한 구조를 가지고 있다고 보면 좋다. 계층 구조html 구조에서 p 태그는 b 태그의 부모격이라고 보면 되는데, 이런 구조를 계층적 구조라고 설명할 수 있다. 이런 계층적 구조를 CSS 에서도 가져간다는 의미인데,Style Sheets 라는 말 그대로 스타일을 정리한 시트라고 보면 된다. 그래서 CSS를 '계층적 구조를 가진 스타일 시트' 라고 단어적 의미를 알 수 있다. 그럼 단계별로 HTML에 스타일을 입혀보자.1. 인라인 스타일로 태그에 직접 꾸..