프론트엔드 스터디

그동안 웹개발을 하면서 프론트쪽 코드에서 HTML을 많이 접해봤는데요 정작 제대로 공부해본 적은 없어서 이참에 친해져(?) 보고자 HTML과 CSS에 대해 공부하는 시간을 가져보려고 합니다.HTML ?HTML(Hypertext Markup Language)은 웹사이트의

저번시간에서 HTML 태그를 활용해서 간단한 웹페이지 구조를 만들어 보았습니다. 그렇다면 HTML의 태그는 어떤 구조로 되어있을까요?보통 태그는 시작 태그와 종료 태그 사이에 텍스트를 넣는 방식으로 사용되는데요, 시작 태그에는 속성이라는 부분이 존재하여 속성명에 속성값

이번시간에는 HTML 태그에 어떤 종류가 있는지 또 어떤 기능을 가진 태그들이 있는지 자세히 알아보려고 합니다. 글꼴 태그 ~ Heading : 제목 또는 부제목 (숫자가 작을수록 크기가 커짐) `` Paragraph : 하나의 문단을 표시 `` Horizontal

이번시간에는 이전에 다뤘던 폰트태그에 이어 목록태그에 대해서 다뤄볼 예정입니다.<ol> Ordered List : 순서가 있는 목록(type 속성으로 글머리 기호를 변경할 수 있음)<ul> Unordered Lists : 순서가 없는 목록<li> Lis

이번시간에는 표(Table) 태그에 대해서 알아볼 예정입니다.표 태그는 데이터베이스의 표(Table)과 같이 행열의 개념을 사용합니다. table: 표 생성. 표 전체를 감싸는 태그caption: 표의 제목 및 설명 (캡션 태그)tr: 표의 행. th(제목 열),td(

이번시간에는 Sementic(의미론적) 태그에 대해서 알아보겠습니다.먼저 Sementic 태그를 사용하면 다음과 같은 이점을 얻을 수 있습니다.검색엔진 최적화웹 접근성 향상가독성 향상그럼 이제 HTML의 Sementic 태그에는 어떤것들이 있는지 살펴볼까요?<he

이번시간에는 Block element와 Inline element에 대해 알아보도록 하겠습니다.Block 레벨 요소의 대표적인 케이스로 <div> 태그가 있으며, Inline 레벨 요소의 대표적인 케이스로는 <span> 태그가 있습니다. 두 태그를 통해서 B

<img> 태그는 HTML 문서에 이미지를 넣습니다.ex)src: 이미지 태그에서 src는 필수값이며 사용할 이미지의 경로를 통해 이미지를 불러옵니다.alt: 필수 요소는 아니지만 사용자에게 이미지를 설명하는 역할을 합니다. 문제가 발생하여 이미지를 표시할 수 없

<a> 태그는 다른 페이지나 같은 페이지의 특정위치,파일,이메일 주소와 그 외 다른 url로 연결할 수 있는 하이퍼링크를 생성합니다.네이버와 구글을 <a> 태그로 감싼 후 href 속성에 각각의 주소를 넣어 하이퍼링크를 생성하였습니다.이제 네이버와 구글 문구

HTML에서의 폼(Form)은 사용자의 정보를 입력받기 위해 사용됩니다. 예를 들어 회원가입 페이지에서 이름,아이디,비밀번호,주소 등등 데이터를 입력받도록 형식이 지정되어 있는데요, 이때 입력받는 데이터들의 묶음을 폼(Form), 그리고 데이터를 폼 데이터(Form D

폼(Form) 태그(2) - select,checkbox,radio

HTML을 학습하면서 video 태그로 동영상을 삽입해본적이 있는데요, 그렇다면 이런 유튜브 영상은 어떻게 삽입하는 걸까요?방법은 의외로 간단합니다.먼저 유튜브에서 원하는 영상을 선택합니다.선택한 영상에서 공유를 클릭합니다.여기서 퍼가기를 클릭하면 아래와 같은 정보가