소상공인 감자네

웹사이트를 방문할 때 가장 먼저 눈에 띄는 것 중 하나가 바로 글씨.멋진 디자인들을 뒷받침 해주려면 그에 맞는 글꼴 디자인이 필요하다. 글꼴을 다양하게 변경해주는 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; 로 사..

웹페이지를 만들려면 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;}..

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

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

HTML을 이해함에 있어 가장 중요한 것이 바로 태그(Tag).과연 태그가 어떤 역할을 하고 어떤 것인지 알아보자. 태그(Tag)란?- 웹페이지를 이루는 HTML에서 구조를 만들고 내용을 정의하는 것이라 볼 수 있다. 우리 일상생활에서도 쉽게 들을 수 있는것이 바로 태그(Tag)일 것이다.물건을 사면 물건의 가격이나 정보가 붙어 있는 라벨을 보통 우리는 태그라고 불리는데,이와 비슷한 의미로 웹페이지에서도 HTML의 태그가 하나하나 컴퓨터에게 이건 '제목'이야, 이건 '이미지' 야. 이런 식으로 알려주는 것이라고 생각하면 된다. 우리들이야 "제목입니다." 라는 글을 작성하면 '제목' 이라는 단어를 보고 '아 이건 제목이구나' 라는 생각을 자연스럽게 가질 수 있지만,컴퓨터는 이건 단순한 문자 내지는 글자라고..

인터넷을 사용하다 보면 HTML(Hyper Text Markup Language)이란 걸 많이 접하게 된다.하지만 “그게 뭔데?” 라는 생각을 해도 크게 관심을 두지 않는게 일반적이다. 여기서 HTML이 뭔데? 하며 궁금증을 해결하고 싶어하는 사람과 별 관심 없는 사람들이 구분될텐데,아마 이 글을 읽는 사람이라면 웹개발에 대한 관심을 가진 분이거나다양한 이유로 웹에 대한 기초지식이 필요하신 분일거라 생각된다. 그래서 비전공자였던 내 경험을 빗대어 조금 더 현실적으로 혹은 가볍고 쉽게 설명하려 한다.좀 더 전문적인 지식이나 깊은 이해는 중간중간 참고 할 수 있는 곳을 첨부할 예정이다.이미 어느정도 지식을 가지신 분 보다는 정말 기초적인 지식과 이해가 필요하신 분께 도움이 되길 바란다. HTML(Hyper ..