본문 바로가기

전체 글348

코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) 오늘의 코드잇 학습일기 시작~ 폼 태그에 관련된 강의였는데, 우리가 흔히 볼 수 있는 로그인, 회원가입 등 페이지와 관련이 많은 내용이었다. 폼(Form) 웹사이트에서 내용을 적는 부분을 폼(Form)이라고 한다. 폼의 구조를 살펴보자면, 가장 먼저 내용을 입력하는 칸을 인풋(Input)이라고 부르며, 각 인풋 옆에 있는 이름을 라벨(Label)이라고 부른다. 그리고 버튼(Button)은 누르면 입력한 데이터를 전송 or 저장하는 역할을 한다. 클래스101의 로그인 화면을 예제로 확인해보도록 하자. 폼(Form)을 만드는 방법 먼저 폼을 만들려면 태그로 감싸 주어야 한다. 그 안에 태그를 넣는다. 미리보기를 실행해 보면 사용자가 내용을 입력할 수 있는 칸이 하나 생긴 것을 확인할 수 있을 것이다. 참고로.. 2023. 4. 24.
코드잇 학습일기 Day15. 아이프레임(iframe) 원래 코딩강의는 되도록 평일에 듣고, 주말에는 휴식에만 집중하는 편인데... 이번 주에는 정신이 없어서 학습일기를 한개밖에 쓰지 못했다. 학습일기 챌린지가 주 2회인데, 주말에 1개를 쓰지 않으면 4월 챌린지를 실패하는 상황이라서, 주말이지만 코딩강의를 듣기로 했다. 아이프레임(iframe) 유튜브에서 공유하기(동영상 퍼가기) 기능을 이용할 때 iframe 으로 시작하는 태그를 확인할 수 있다. 아이프레임은 inline frame 이라는 의미이다. 간단하게 설명하자면 html 문서 안에서 또 다른 html 문서를 보여주는 역할을 한다. 개발자 도구를 열어서 보면 태그 안에는 , , 태그가 모두 들어있는 것을 확인할 수 있다. 이것을 응용하여, 만약 어떤 html 화면에서 다른 html 화면을 불러오고 싶.. 2023. 4. 22.
코드잇 학습일기 Day14. 멀티미디어(이미지, 비디오, 오디오) 한동안 바쁜 일이 있어서 코드잇 강의를 듣지 못했다. 더 미루면 이번 주 코드잇 학습일기 챌린지를 할 수 없을것만 같아서, 시간을 쪼개어 모니터 앞에 앉았다. 이미지를 넣을 때 이미지를 넣을 때에는 라는 태그를 사용한다. 태그 안에 src 속성값으로 이미지 경로를 적어주면 된다. 이미지 태그와 함께 사용하는 속성으로 alt가 있는데, 이 곳에는 이미지에 대한 정보를 텍스트로 넣는다. 그러면 마크업만 보고 어떤 이미지인지 알 수 있으며, 이미지를 볼 수 없는 시각장애인용 스크린리더 프로그램에서도 alt에 적혀있는 내용을 읽어준다. 또한 이미지 다운로드에 실패했을 때에도 이 이미지를 보여준다. 이미지를 보지 못해도 어떤 이미지인지 대충 짐작이 가능하기 때문에 사용자를 배려하여 되도록이면 alt 속성을 적어.. 2023. 4. 21.
코드잇 학습일기 Day13. 테이블 태그와 스타일링 요즘 듣는 코드잇의 html 핵심 개념 강의는 기초적인 html 태그들을 소개하고 있다. 이미 알고 있는 내용들을 한 번 더 정리하는 기분으로 듣고 있는데, 설명이 어렵지 않고 퀴즈도 재미있는 편이라 강의를 듣는 시간이 기다려진다. 이 정도면 취미로 코딩 강의를 듣는다고 할 수 있을지도 모르겠다. 표를 그리고 싶을 때 , , 표로 정리된 정보를 나타내고 싶을 때 사용하는 태그에 대해서 알아보도록 하겠다. 표를 그릴 때에는 아래 예제처럼 태그 안에 과 태그를 사용해서 만든다. 태그는 행을 표현하며, 태그는 열을 표현한다. 예전에는 테이블 태그를 이용해서 레이아웃을 나누고 사이트를 꾸미기도 하였는데, 최근에는 flex, grid 등 바람직한 방법들이 있으므로 테이블 태그는 표로 정보를 보여주고 싶을 때에만 .. 2023. 4. 12.
코드잇 학습일기 day12. 리스트 태그와 스타일링 하루 업무를 마치고 퇴근하려다가 오늘 코드잇 강의를 듣지 않았다는 게 떠올라서 다시 모니터 앞에 앉았다. 오늘 강의는 모두 알고있는 내용 들이어서 복습하는 기분으로~ 빠르게 다섯개 강의를 수강할 수 있었다. 순서 있는 리스트 만들기 , 순서가 있는 리스트를 만들 때는 태그 안에 태그를 사용해서 내용을 작성하면 된다. 그렇게 하면 코드에 적혀있는 순서대로 1, 2, 3 숫자로 된 글머리가 생긴다. 순서 없는 리스트 만들기 , 순서가 없는 리스트를 만들 때에는 태그 안에 태그를 사용해서 내용을 작성한다. 이렇게 하면 내용 앞에 자동으로 글머리 숫자 대신, 동그란 모양의 포인트가 생긴다. 리스트 스타일링하기 태그에 type이라는 속성을 주어 리스트 글머리를 어떻게 보여줄지 정할 수 있다. 라고 쓰면 알파벳 소.. 2023. 4. 10.
코드잇 학습일기 Day11. 텍스트 문서를 작성하는 데 필요한 태그들 오늘까지 마감인 업무가 있어서 오전부터 정신이 없다. 더 일찍 출근했어야 하는데, 하는 후회를 해보지만... 그건 이미 엎질러진 물이고, 디자인 리뷰가 있는 4시 전까지 초인모드로 달리는 수밖에...! 총 5개 섹션 정도를 만들어야 되는데 2개를 완성해놓고, 집중력이 너무 저하된 것이 느껴져서 잠시 코드잇 강의를 수강하기로 했다. 오늘은 텍스트 문서를 작성하는 데에 필요한 태그들에 대해서 알아보는 시간을 가졌는데, 코드잇 강의의 가장 첫 문단 문구가 기억에 남는다. 은 웹브라우저에서 큰 글자로 두껍게 보입니다. 하지만 이런 겉모습이 제목 태그의 본질은 아닌데요. 태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미입니다. 무언가를 결정하거나 생각하고 행동할 때, 그것이 무엇이든 본질에서 멀어지면 안되는.. 2023. 4. 5.
코드잇 학습일기 Day10. 링크 상대 주소, url 프래그먼트, 새 탭 열기, URI 스킴 오랜만에 다시 돌아온 코드잇 학습일기! 지난 주에도 한 개 쓰고 일주일만인데 엄청 오랜만인 것처럼 느껴진다. (왜지?) 오늘은 링크에 대해서 공부했다. 링크는 태그로 만들 수 있는데, 퍼블리싱을 공부해 본 적이 있다면 정말 필수적으로 공부해야 하는 기초 태그라고 할 수 있다. 링크를 사용하지 않고서는 웹사이트를 만드는 것이 거의 불가능하니까... 그래서 오늘 들은 강의들은 익숙한 내용들이 많았고, 다시 한 번 아는 내용들을 복습할 수 있었던 좋은 기회였다. 어제는 회사 업무가 바빠서 코드잇 강의를 듣지 못했다. 적어도 하루에 강의 한 개 정도는 듣자는 것이 목표이지만, 지키지 못했다고 해서 동기부여에 부정적인 영향을 끼치는 건 더 좋지 않을테니까... 정 못하겠으면 '바빠서 어쩔 수 없었어' 하고 주말에.. 2023. 4. 4.
계절의 변화를 느끼며 살기 예전에 글씨를 가르쳐주시던 선생님께서 사람은 계절의 변화를 느끼며 살아야 한다고 말씀하신 적이 있다. 그 때는 어려서 이해하지 못했는데, 요즘은 그 말을 실감하고 있다. 걷다가 예쁜 꽃들을 보면 그냥 지나치지 못하고 잠시 멈추어 그 모습을 카메라에 담는다. 특히나 요즘은 날씨가 따뜻하고 여기저기에 벚꽃이 한창이라 산책하는 즐거움이 두 배가 되었다. 성남의 벚꽃은 이번 주말이 피크일 듯 하여 오늘도 산책을 하러 탄천에 나가볼까 한다. 시간이 참 빠르게 흘러 정신차려보니 4월이 되었다. 이룬 것은 하나도 없는데 올해의 4분의 1이 그냥 지나갔다. 이렇게 살아도 되나, 나는 제대로 살고 있는건가. 주기전으로 찾아오는 사춘기같은 기분에 늘 해답을 찾지 못하고 고민만 가득한 나이지만, 더 늦기 전에, 더 후회하기.. 2023. 4. 2.
카카오프렌즈 춘식이 피규어 트레이 내돈내산 후기 넘나 귀여움 ㅠㅠ 요즘 회사 업무가 점점 많아지고 있다. 그에 따라 회사에서 보내는 시간도 점점 길어지고 있다. 오랜 시간을 회사에서 보내는 나님을 위해 오랜만에 셀프 선물을 주기로 했다. 일단 컴퓨터 앞에 앉아있는 시간에 기분이 좋아야 하니까... 선물을 찾아보던 중, 카카오 프렌즈 샾에서 마음에 쏙 드는 아이템을 발견해서 주문하고, 하루만에 받아볼 수 있었다. (배송 빠른거 진짜 최고!) 회사로 가볍고 커다란 박스 한 개가 배송되었다. 카카오 프렌즈는 그린라이프를 위하여 모든 배송 포장재를 친환경 소재로 바꾸어 가고 있다고 한다. 실제로도 종이 박스 안에 비닐이 아닌 종이 포장재로만 채워져 있었다. 나님에게 주는 셀프 선물은... 짜잔! 바로 춘식이 피규어 트레이였다. 춘식이 멀티 트레이는 차 키나 액세서리 등 자주 .. 2023. 3. 28.
코드잇 학습일기 Day9. HTML 개념과 구조, 코멘트(주석) 작성 방법 오랜만에 다시 돌아온 코드잇 학습일기~! 2월에 학습일기 챌린지에 참여해서 50,000 네이버 포인트를 받았다. 챌린지가 끝날 줄 알고 있었는데 3월에도 동일한 조건으로 학습일기 챌린지를 진행한다는 사실을 얼마 전에 알았다. 으아, 진작 알았으면 또 참여 하는건데 아쉽...ㅠㅠ 그래서 4월에도 챌린지를 하지 않을까 하는 기대와 그것을 준비하는 워밍업으로 3월 마지막주에 학습일기를 하나 써보기로 했다. 오늘 공부한 내용은 프론트엔드 과정 중 하나인 HTML 핵심 개념 토픽이다. 기초적인 내용이라 부담없이 복습하는 기분으로 듣고, 또 모르는 내용이 나오면 블로그에도 정리해두려고 한다. HTML 의미 HTML은 Hypertext Markup Language의 약자이다. 첫번째 단어인 하이퍼텍스트(Hyperte.. 2023. 3. 27.

티스토리툴바