본문 바로가기

전체 글395

HTML 태그 보충 설명 1. title 태그 출력 위치 KASSY의 HTML 기초 결과물> 2. meta 태그 사용이유 쓰지 않으면 한글이 제대로 나오지 않는 경우가 있다. 메모장에서 html 문서를 작성할 때는 저장시 인코딩으로 UTF-8을 선택해 주면 된다. 3. 닫아주지 않아도 되는 태그 등 4. html의 문법 오류 허용 문법오류에 관대하다. 태그를 깜빡하고 닫지 않거나, 오타가 있어도 웹 브라우저가 임의로 해석해 출력해 준다. 5. 대소문자를 구별하지 않는다. 표준은 소문자를 쓰는 것을 권장한다. HTML = html 6. 주석을 쓰는 이유 코드를 읽는 사람을 위해서 설명을 돕기 위해서 쓴다. 긴 코드의 경우나 여러 명과 같이 작업을 할 때 알아 보기 쉽게 할 수 있다. NotePad 에디터 사용시 주석 단축키 Ctr.. 2023. 2. 1.
HTML 태그 - img, a href 1. 속성 src="이미지 파일 주소 또는 이미지 파일 이름.확장자" 컴퓨터에 저장된 이미지를 사용하려면 html 만든 폴더와 같은 폴더에 이미지 파일이 있어야 인식하고 파일을 열 수 있다. 다른 공간에 이미지 파일이 저장되어 있으면 파일이 열리지 않는다. 속성값 title / alt 차이 title: 그림에 마우스를 올렸을 때 그림에 대한 설명을 넣을 수 있다. alt: 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 보여준다. alt 속성은 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 개념확실히 알고가기! 1. 이미지, title 태그 2. 이미지, alt 태그 둘 .. 2023. 2. 1.
웹 브라우저, 웹 문서 웹브라우저 웹문서를 볼 수 있는 프로그램 인터넷 익스플로러, 크롬 웹문서 확장자 html 인터넷 화면, 홈페이지 구성문서 확장자를 따라서 html 파일이라고 부른다. 2023. 1. 31.
CSS 연습 자주 쓰이는 CSS 태그 배경관련 background-color, background-image, background-size 사이즈 width height 폰트 font-size(px), font-weight, font-famliy color 간격 margin(바깥), padding(안쪽) 정렬 text align : left, right, center 💡 1. 크롬 개발자 도구에서 요소 선택 버튼을 누르고 요소를 선택하면 Elements 탭 안 HTML 소스 코드에서 그 요소를 찾을 수 있다. 2. Styles 탭에서 특정 스타일 적용을 해제하여 어떻게 영향을 미치는지 확인할 수 있다. 아무것도 안 했을 때 글씨색 바꾸기 - hotpink 글자체 바꾸기 - oblique(기울어진 글꼴) 첫번째 세부 .. 2023. 1. 31.
Bootstrap 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 쉽고 빠른 반응형 웹디자인을 만들 수 있게 한다. 미리 정해진 클래스들을 다양하게 꾸며 CSS 파일로 정리한 것을 HTML에서 불러와 쓰는 것! 온라인에서 가지고 오는 것이기 때문에 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있다. 부트스트랩은 SASS 스타일시트를 기반으로 한다. 부트스트랩 사이트 : https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customiz.. 2023. 1. 30.
JavaScrip 기초 문법 변수 선언 '변수 선언'이란 이 이름에 특정한 값을 부여하겠다는 뜻이다. 변수를 선언할 때에는 let을 쓰고, let 뒤에 원하는 변수 이름을 적고 = 뒤에 값을 적으면 된다. let 변수이름 = 값 예시> 💡 undefined란? '아직 할당하지 않은 값'을 표현하기 위해 사용하는 값 undefined 가 나타나는 경우 객체에서 없는 프로퍼티를 꺼내려고 할 때 함수를 호출할 때, 값이 들어오지 않은 매개변수를 사용하려 할 때 아직 값이 할당되지 않은 변수를 사용하려 할 때 배열의 범위를 넘어서는 값을 가져오려 할 때 함수가 아무것도 반환하지 않을 때 2023. 1. 30.
Visual Studio Code 프로그램 사용하기 VSCode (Visual Studio Code)는 최근 인기를 얻은 IDE(Integrated development environment)로, 각종 프로그램의 작성, 수정, 실행을 도와주는 MS 워드 같은 프로그램이다. VSCode 실행, 폴더열기 👉 바탕화면에 원하는 폴더를 만들고, VSCode에서 Open Folder를 클릭 해당폴더 선택하여 열기 HTML 파일 만들기 👉 왼쪽 폴더 영역에서 New File 아이콘을 클릭 새로운 파일 이름을 넣는 창이 나온다. 파일 이름을 index.html index.html 파일이 만들어진다. 내용 입력하기 👉 내용을 직접 입력하다 보면 어떤 내용을 입력할지 VSCode가 예측하여 알려주기도 한다. 👉 입력이 끝나면 Ctrl + S를 눌러 파일을 저장 👉 바뀐 .. 2023. 1. 30.
CSS란? Cascading Style Sheets의 줄임말 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 즉, 웹페이지를 꾸미는데 사용되는 언어 HTMl의 구성에 따라서 부모 요소에 디자인을 적용하면 자동으로 안쪽 자식 요소까지 디자인 적용이 된다. HTML 문서 안에서는 안에 로 공간을 만들어 작성한다. 선택자를 이용하여 특정 요소에 속성을 적용한다. 선택자(selector) 선택을 해주는 요소, 특정 요소들을 선택하여 스타일을 적용할 수 있게 해준다. 👉 무엇을 꾸민다는 것은, 일단 '선택(select)해야' 가능한 일이다. 예를 들어 firstname 이라고 이름표를 달아준 뒤, "firstname 이란 이름표가 붙은 부분의 글씨를.. 2023. 1. 20.
HTML 작성 예시 👉 정렬의 중요성 HTML 상에서 줄 바꿈과 연속적인 띄어쓰기는 아무런 의미를 갖지 않는다. 하지만 코드의 정렬이 제대로 되어있지 않으면, 개발자의 입장에서 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워지기 때문에 정렬을 꼭 하자! 주석 처리 사용법 주석은 컴퓨터/브라우저가 읽지 않는 줄이다. 주석은 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 또는 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용한다. 주석처리하고 싶은 라인(들)을 선택하고 Ctrl(Cmd) + / 단축키를 사용해 주석처리를 해줄 수 있다. HTML, CSS, JavaScript, Python 등등 각 언어마다 주석처리 문법이 다르기 때문에 단축키를 사용하는 것이 좋다. 기본적으로 사용하는 태.. 2023. 1. 19.
HTML이란? Hypertext Markup Language의 줄임말 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어 💡 Markup Language이란? 마크업은 그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야 할 것 인지를 나타내기 위해, 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들을 말한다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 꺾쇠 괄호에 둘러싸인 "tag"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 JavaScript ,.. 2023. 1. 19.
웹 기초 개념 알기 서버 (server) 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램(server program) 또는 장치(device)를 의미한다. 클라이언트(client) 네트워크를 통하여 서버라는 다른 컴퓨터 시스템 상의 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 말한다. 네트워크(Network) 둘 이상의 컴퓨터와 이들을 연결하는 링크의 조합이다. 물리적 네트워크는 네트워크를 구성하는 하드웨어(어댑터, 케이블 및 전화선과 같은 장비)다. 소프트웨어 및 개념 모델이 논리적 네트워크를 형성한다. 클라이언트 — 네트워크 — 서버 2023. 1. 17.

티스토리툴바