본문 바로가기

전체 글135

텍스트를 표현하는 다양한 스타일 (1) 이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다. 지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다. 텍스트의 효과를 바꾸는 속성 font-family (글꼴 지정) : 주로 태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : | [,] 으로 사용 → 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용 → 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음 font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로.. 2022. 8. 23.
웹 문서에 디자인 입히기 저번 단원에서 html을 마치고 css를 처음 시작했다. css는 웹의 보이는 모습을 만들고 움직이는 형태까지 만들 수 있다길래 어렵지 않을까 생각했었는데 생각보다 쉬웠고 재미있었다. 아 그리고 하나 궁금증이 생겼는데 ID선택자는 문서에서 한 번만 적용할 수 있다고 한다. 그러면 굳이 ID를 만들지 않아도 인라인 스타일을 사용해서 원하는 줄의 스타일을 바꾸면 되지 않을까하는 것이다. 그런데 지금 생각해보니까 외부 스타일을 이용하기 위해서는 ID 선택자를 쓸 수밖에 없을 것 같다. CSS(Cascading Style Sheet) CSS를 사용하는 이유 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 CSS의 스타일형식 선택자 {속성1 : 속성값 .. 2022. 8. 20.
입력 양식 작성하기 (2) input 태그의 주요 속성 placeholder : 입력란에 힌트를 보여준다 readonly : 읽기전용 문서를 만든다 required : 필수 입력란을 만든다 autofocus : 창을 열었을 때 바로 타이핑 할 수 있도록 해당 입력란이 선택된다 다음은 input 태그의 여러 속성을 담은 코드이다. 프런트엔드 개발자 지원서 HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 지원 분야 웹 퍼블리싱 웹 애플리케이션 개발 개발 환경 지원 동기 미리보기 + 추가. html 파일을 첨부하면 화면이 비정상적으로 꺠진다. 그래서 웹 미리보기는 삭제 폼에서 사용할 수 있는 여러 태그 ~ : 여러 줄을 입력할 수 있는 텍스트 박스 생성 select : 드롭.. 2022. 8. 19.
입력 양식 작성하기 (1) 이번 단원에서는 신기한 태그를 많이 배웠다. 평소 내가 많이 접하던 기능을 배울 수 있어서 재미있게 공부했지만 로그인과 같이 데이터베이스를 알아야 완전한 기능을 만들 수 있는 것도 있어서 데이터 베이스에 관해서도 흥미가 생긴 단원이였다. 폼 삽입하기 폼 : 특정 항목에 사용자가 무언가를 입력할 수 있게 만든 것 폼의 작동원리 사용자가 정보를 입력 → 정보가 데이터베이스로 이동 → 원하는 값을 사용자에게 전달 ※ 이 때 사용자에게 보여지는 화면을 대부분 웹에서 처리한다. 따라서 HTML을 이용해서 폼을 만든다. 폼을 만들기 위한 태그 ~ : 폼을 만드는 태그. 폼의 가장 윗 부분과 아랫부분에 지정한다. form 태그의 속성 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정.. 2022. 8. 16.
웹 문서에 다양한 내용 입력하기 이번 단원에서는 웹의 내용을 조금 더 풍성하게 돕는 여러가지 태그를 배웠다. 평소에 쉽게 접하는 테이블, 리스트와 같은 것들인데 내가 생각했던 것 보다는 더 복잡했던 것 같다. 또 이미지를 내가 원하는 이미지를 넣어보려고 했었는데 자꾸 화면에 보이지 않아 고민하던 중 이미지 파일의 경로를 해당 파일 안에 넣어야 한다는 것도 알 수 있었다. 텍스트 입력 태그 ~ : 1부터 6까지 제목을 의미 ~ : 글의 한 단락 : 줄바꿈 ~ : 인용문 ~ : 굵은 글씨로 강조 ~ : 굵은 글씨체로 형태만 변환 ~ : 기울임꼴로 강조 ~ : 기울임꼴로 형태만 변환 다양한 태그를 이용한 텍스트 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통.. 2022. 8. 15.
HTML 기본 문서 만들기 이번 단원은 HTML의 기초에 대해 다룬다. HTML의 구조와 뜻, HTML 파일 만들기 등 웹을 만들기 위한 가장 기초적인 틀을 만들기 위한 방법을 배운다. HTML (HyperTextMarkupLanguage) : 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어. = 웹 문서를 만드는 언어 → 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것 HTML의 기본 구조 프론트엔드 웹 개발 HTML CSS 자바스크립트 미리보기 HTML 삽입 미리보기할 수 없는 소스 HTML을 구성하는 기본 태그 : 현재 문서가 HTML언어로 작성되었다는 것을 알림 : 웹 문서의 시작과 끝을 나타내는 태그 : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분 : 실제로 웹 브라우저 화면에서 .. 2022. 8. 14.
웹 개발 시작하기 웹 공부를 시작하기에 앞서 나는 아직 프론트와 백엔드 중에서 어느 분야를 공부해야할지 방향성을 잡지 못했다. 그래서 이번 책을 공부하며 내가 어떤 분야를 좋아하는지 생각해보는 시간을 가지려 한다. 이전까지는 내가 남들보다 늦었다고 생각해 빨리 진도를 빼는데 급급했었다. 그래서 내가 뭘 좋아하고 어떤 공부를 해야할지도 몰랐고 그냥 친구가 하던 공부를 따라했던 것 같다. 그래서 이번 단원은 쉬어가는 시간이라고 생각하고 여러 경험을 해보면서 확실히 내가 무엇을 좋아하고 어떤 분야가 맞는지 찾는게 우선인 것 같다. → 학습목표 : 웹 개발의 정의를 이해하고 어떤 분야가 있는지 알아보기 html / css / js의 차이점 알기 정적 사이트 : 방문자에게 정보를 보여주기 위해 만든 웹 사이트. 미리 작성한 내용을.. 2022. 8. 13.
무료 도메인 발급받기 예전에 html을 공부하며 웹 사이트를 만든 적이 있었다. 그때는 '생활코딩' 이라는 유튜브 채널을 보며 그대로 따라하는것에 그쳤지만 이번에 다시 제대로 html과 css/ 자바스크립트를 배우며 스스로 나만의 웹 사이트를 만들어보고 싶어졌다. 그러기위해선 우선 웹사이트의 구성도 중요하지만 다른 사람들의 유입이 있기 위해선 도메인이 필요했다. 여기서 도메인이란 웹사이트의 주소를 말한다. 주소를 발급받기 위해서 가장 좋은 방법은 유료로 도메인을 발급받는 법이 있지만 공부하는 학생 입장에서는 무료로 도메인을 발급받는 법이 필요했기 때문에 여러 방법을 찾아보았다. 먼저 무료 도메인을 발급받는 사이트에서 발급받는 법이다. 이 방법은 도메인을 무료로 발급받는 것이기에 몇개월에 한 번씩 재등록이 필요하다. 따라서 전.. 2022. 8. 12.
Doit HTML + CSS + JavaScript 출처 Doit HTML + CSS + JavaScript 카테고리에 있는 모든 글은 고경희 교수님의 'Doit HTML + CSS + JavaScript' (이지스 퍼블리싱) 에서 정리 및 요약 간접 인용한 것임을 밝힙니다. 2022. 8. 11.

티스토리툴바