소상공인 감자네

1. 요소의 내용 조작하기HTML 요소의 태그 사이에 들어가는 텍스트나 다른 HTML 태그를 조작하는 방법이다.두 가지 속성이 사용되며, 역할이 명확히 다르다.a. 텍스트만 변경 - textContenttextContent 는 요소 내부의 순수한 텍스트 내용만을 가져오거나 설정할 때 사용한다.보안상 가장 안전하며, 성능도 준수하다. - 용도 : 사용자에게 보여줄 단순한 텍스트나 숫자만 변경 시- 특징 : 새로운 HTML 태그가 삽입되면, 그것을 태그가 아닌 일반 텍스트로 처리/*HTML 예시기존 텍스트*/// 1. 변경할 태그 선택const messageDiv = document.querySelector('#message');// 2. 내용 설정 (순수한 텍스트만 삽입)messageDiv.textCont..

CSS 속성 중 하나인 position 을 사용하다보면 요소들을 겹칠 수 있는 기술을 활용 할 수 있다.요소들이 겹치게 되면 요소의 순서가 중요한 상황이 생기게 되는데,그때 활용할 수 있는 속성이 바로 z-index 속성이다. 팝업창, 드롭다운, 고정된 헤더등 z-index 를 이용해 순서를 조정하는 것이다. 1. z-index 필요성우리가 만드는 웹페이지들은 기본적으로 가로축(X), 세로축(Y)이 존재하는 평면이다.하지만 CSS 속성인 position 을 사용하게 되면 요소들이 서로 겹칠 수 있는 상황이 생기고,그렇게 되면서 깊이(Z축)의 개념이 생겨나게 된다. 이 상황에서 어떤 요소가 위로 오고 아래로 갈지 결정해주는 것이 바로 z-index이다. z-index 의 값이 클수록 사용자가 보이는 쪽에 ..

HTML 문서들을 읽다 보면 태그에 id와 class 라는 속성이 추가 된 것을 많이 볼 수 있다.아이디(ID)와 클래스(Class)는 HTML 태그에 붙이는 하나의 이름표라고 생각 하면 된다. 이런 이름표를 붙이는 이유는태그에 스타일(CSS)을 입히거나 동작을 제어(Javascript)하기 위해특정 태그를 찾는데 도움을 주기 때문이다. 1. ID 와 Class 의 필요성우리가 본격적으로 CSS나 Javascript 작업을 하기 위해서 ID나 Class를 사용하게 되는데,우선 하나의 예시를 살펴보자.안녕하세요.새로운 블로그를 만들었습니다.html에 대한 내용을 다루고 있습니다.초보들에게 도움이 될 것 같네요. 이렇게 작성을 한 후, 글자에 색을 바꾸고 싶다면p{ color: red;} 이런식으로 태그..

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

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

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

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