반응형 Web Front/HTML + CSS + 자바스크립트21 [CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) Preface 이번 장에선 display와 float 속성을 사용하여 원하는 위치에 요소를 나타내는 방법을 공부했다. 유튜브 강의로 이 부분을 봤을 땐 어렵다고 느꼈었는데, 막상 책을 보며 실습하자 크게 어렵진 않았다. 다만, 이번 장의 마지막 부분에 있는 position: absolute 속성을 사용하여 사진 위에 텍스트를 표현하는 예제와 마무리 문제 3번은 조금 헷갈리는 부분이 있었다. 전자는 텍스트의 위치 값이 마음대로 조절되지 않았고, 후자에선 링크 요소인 a의 display 속성을 block으로 지정했는데도 float: left 속성을 통해 모든 요소가 한 줄에 가로로 나타나는 것이 이해 되지 않았다. 내가 공부한 내용에 따르면 블록 요소는 한 줄을 전부 차지하는데, float를 사용하면 이 특.. 2022. 7. 27. [CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) Preface 이번 장에선 기본적인 박스 모델을 만들어보고, 지난 장에서 언급했던 마진과 패딩에 대해 다시 한 번 자세히 공부했다. 처음 마진과 패딩의 정의를 봤을 땐 솔직히 잘 이해가 되지 않았었는데, 직접 두 속성을 코드에 적용해보며 비교하자 두 개념의 차이점을 확실히 알 수 있었다. 1. CSS와 박스 모델 - 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 1) 해당 요소의 너비가 100%이다. 2) 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - 인라인 레벨 요소: 콘텐츠만큼만 영역을 차지하는 것 1) 나머지 공간에 다른 요소가 올 수 있다. - 박스 모델 요소: 박스 형태인 요소 - 박스 모델의 구성 1) 콘텐츠 영역 2) 패딩 3) 테두리 4) 마진 etc. -.. 2022. 7. 26. [CSS] 텍스트를 표현하는 다양한 스타일 Preface 이번 장에선 CSS의 다양한 속성들을 공부했다. 알아야 할 속성들이 너무 많아서 머리가 아플 지경이다. 아, 그리고 HTML의 태그들 중 기억이 잘 나지 않는 태그들이 많아 이들을 따로 정리하려고 카테고리를 하나 만들었다. HTML, CSS, JS의 태그와 속성 들을 한 눈에 보기 좋게 정리해 놓고 필요할 때마다 볼 생각이다. 1. 글꼴 관련 스타일 - font-family 속성: 웹 문서에서 사용할 글꼴을 지정한다. 1) 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. → 1번 째 설정한 글꼴을 가져올 수 없을 때(네트워크 상의 문제 등) 2번째 설정한 글꼴을 지정한다. 2) 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶어서 표현한다. font-famil.. 2022. 7. 23. [CSS] CSS의 기본 Preface 이번 장에선 CSS의 문법 구조를 간략히 공부했다. CSS도 문법 자체는 크게 어려운 부분이 없지만, HTML의 태그와 마찬가지로 스타일 속성 값의 종류가 다양한 것 같다. 무엇보다 파이썬, MySQL, HTML, CSS 등 여러가지 언어를 배우다보니 여러 언어의 문법이 뒤섞여 헷갈린다;;; 1. 웹 문서에 디자인 입히기 - 스타일(style): 문서의 겉모습을 결정짓는 것 - 스타일을 사용하는 이유 1) 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. → 반응형 웹 디자인: 전자기기의 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법 2. 스타일과 스타일 시트 - CSS 스타일의 형식 선택자 { 속성1:.. 2022. 7. 21. [HTML] 입력 양식 작성하기 (2) Preface 이번 장을 끝으로 해당 책의 HTML 파트를 모두 마쳤다. HTML의 문법 자체는 전체적으로 매우 평이한 수준이라고 생각한다. 그러나 태그들과 해당 태그의 속성들이 너무 다양해서 원하는 형식의 내용을 정확히 작성하기 위해선 많은 경험이 필요할 것 같다. 투자한 시간 대비 실력 향상이 완전한 정비례 관계일 것 같은 느낌? 다음 장부턴 HTML로 작성한 기본 뼈대를 꾸미는 작업을 하는 CSS 공부를 시작한다. 2. 사용자 입력을 위한 input 태그 - type의 number, range 필드에서 사용할 수 있는 속성 1) min: 필드에 입력할 수 있는 최솟값을 지정한다. (디폴트 값: 0) 2) max: 필드에 입력할 수 있는 최댓값을 지정한다. (디폴트 값: 100) 3) step: 숫자.. 2022. 7. 18. [HTML] 입력 양식 작성하기 (1) Preface 이번 장에선 폼을 사용하는 방법과 input 태그의 다양한 속성을 공부했다. input 태그는 속성의 종류가 정말 많아 웬만한 타입의 정보는 모두 입력받을 수 있을 것 같다는 생각을 했다. 또, 이번 장에선 서버 프로그램과 연관된 것이라며 다루지 않고 넘어간 몇몇 속성들이 있는데, 이들을 보며 지난 책에서 PHP와 Apache를 연동하여 웹 서버를 잠시 다루었던 것이 떠올랐다. 그러다 문득 제대로 된 동적 웹 사이트를 만들려면 서버 스크립트 언어도 배워야 할 것 같다는 생각이 들어 친구에게 실무에선 PHP와 JSP 중 주로 어떤 언어를 사용하는지 물어봤다. 친구는 서버사이드 렌더링을 하지 않기 때문에 서버 스크립트 언어를 사용하지 않는다는 답변을 줬다. 구글링을 통해 서버사이드 렌더링의 정.. 2022. 7. 17. [HTML] 웹 문서에 다양한 내용 입력하기 (2) Preface 이번 장에선 이미지, 오디오, 비디오, 하이퍼링크를 삽입하는 방법을 공부한 후 마지막엔 두 가지의 연습문제를 풀어봤다. 역시 어려운 부분은 없었고, 연습 문제도 손쉽게 해결할 수 있었다. HTML은 크게 고민할 부분이 없어서 딱히 적을만한 내용이 없다... 4. 이미지 삽입하기 - 태그: 웹 문서에 이미지를 삽입할 때 사용 1) src 속성: 이미지 파일의 경로를 지정 2) alt 속성: 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력 (대체 텍스트) - 파일 경로 삽입 방법 1) 웹 문서 파일과 이미지 파일이 같은 경로: 이미지 파일의 이름만 적으면 된다. 2) 웹 문서 폴더의 하위 폴더에 이미지 파일: 하위 폴더와 함께 이미지 파일 이름을 적는다. - 웹에서 사용하는 이미지.. 2022. 7. 16. [HTML] 웹 문서에 다양한 내용 입력하기 (1) Preface 이번 장에선 텍스트, 목록, 표에서 사용할 수 있는 태그들을 공부했다. 예제를 바탕으로 조금만 수정해도 내가 원하는 형태의 결과를 웹 브라우저에 출력할 수 있어서 그런지 쉽고 재미있다고 느껴졌다. 다만 태그의 종류가 너무 많아 원하는 형식을 만들어주는 태그를 바로바로 사용하려면 꽤나 숙련되어야 할 것 같다는 생각이 들었다. 이번 책의 HTML 부분이 끝나면 주요한 태그들을 아이패드에 정리해서 시간 날 때마다 볼 계획이다. 1. 텍스트 입력하기 - 태그: 제목을 나타내는 태그 1) n의 자리에는 1~6의 숫자가 들어가며, 크기를 나타낸다. - 태그: 텍스트 단락을 만든다. 1) 편집기에서 줄을 바꾸더라도 웹 브라우저에선 한 줄로 표시된다. 2) 텍스트 단락의 내용이 길어 화면에 한 줄로 표시.. 2022. 7. 15. [HTML] HTML 기본 문서 만들기 Preface 이번 장에선 HTML 파일의 전체적인 구조와 몇 가지 주요한 시맨틱 태그를 알아봤다. HTML의 문법 자체는 어려운 부분이 없는 것 같고, 몇몇 주된 태그들의 종류와 사용 방법 정도만 익히면 충분히 내가 원하는 내용을 웹 상에 표현할 수 있을 것 같다. 아, 그리고 책에 자세히 소개되지 않는 태그들 중 궁금한 것들은 따로 정리해 놓자. 1. HTML과 첫 만남 - HTML(Hyper Text Markup Language): 웹 문서를 만드는 언어 - 하이퍼텍스트: 문서를 서로 연결해주는 링크 - 태그(tag): 웹 문서의 다양한 부분을 구분할 수 있도록 해주는 꼬리표 - HTML의 기본 기능: 웹 브라우저에게 보여 줄 내용을 마크업하고 문서끼리 링크하는 것 - 스타일 시트(style she.. 2022. 7. 14. 웹 개발 시작하기 Preface 오늘부터 웹 공부를 시작했다. 책에 30일 코스가 소개되어 있어 이에 맞춰 진도를 나가려고 한다. 다음 장은 '웹 개발 환경 만들기'로 vscode를 설치하고 설정하는 방법을 소개하는데, 나는 이미 해당 ide를 사용해왔으므로 블로그 글은 생략하겠다. 이번 장에선 웹 개발이란 무엇인지, 프런트엔드와 백엔드 영역에서 요구되는 기술엔 어떤 것들이 있는지 등을 알아봤다. 이미 여러 번 공부하고 언급했던 내용이므로 간략하게 정리만 하고 넘어간다. 1. 웹 개발 알아보기 - 웹 사이트의 종류 1) 정적(static) 사이트 2) 동적(dynamic) 사이트 - 서버(server): 인터넷에 연결된 컴퓨터 - 클라이언트(client): 사용자가 웹 사이트에 접근하려고 사용하는 전자기기 → 좁은 의미로.. 2022. 7. 14. 이전 1 2 3 다음
