TECHIT 멋쟁이사자처럼23 [온보딩트랙]블록요소와 인라인 요소 Block Element(블록 요소) 개별 요소마다 줄을 바꾸며, 부모 요소 너비의 가로 길이를 차지한다. 내용과 별개로 자신의 영역을 가진다. ~ , , 등이 있다. 블록 요소의 가로 길이를 줄이고, 새로 추가한다고 해도 옆에 생기지않는다. width와 height로 요소의 크기를 조절할 수 있다. Inline Element(인라인 요소) 한 줄에 표시되며, 태그로 감싸진 내용만큼만(콘텐츠만큼) 영역을 차지한다. , , 등이 있다. HTML에서 인라인 요소 밑에 인라인 요소를 새로 추가하면 새로운 줄이 아니라 옆쪽으로 생기는 것을 알 수 있다. width와 height로 요소의 크기를 조절할 수 없다. margin과 padding은 좌우에만 적용 가능하다. Inline-Block Element(인라인-.. 2023. 12. 13. [온보딩트랙]HTML <head> 명칭은 Living Standard이며, 웹 표준이다. 최신화된 HTML을 쓰겠다는 의미이다. 이 문서가 어떤 언어로 작성이 되어있는지 명시해주는 부분이다. 보일러플레이트를 단축키로 생성하면 lang="en"으로 설정되어 있는 경우가 많은데, 작업중인 웹 페이지가 한국어로 작성되었다면 lang="ko"로 바꿔주는 것이 좋다. 를 사용하여 웹 문서의 속성, 인코딩 방식, 외부 리소스를 불러오는 등 설정 정보가 담긴다. 이 태그는 여러 개가 쓰일 수 있고, 그 안에 작성하는 속성에 따라 용도가 달라진다. 예를 들어, 위 코드에서 첫 줄 은 문서를 어떻게 해석할지 인코딩 방식을 설정한다. '턈0?????c랾?▲콬-5%' 이런 식으로 문서 내용이 깨진 문자로 보여지는 것을 방지한다. 그 다음 이어지는 태그는 브.. 2023. 12. 13. [온보딩트랙]HTML 구성(기본 구조) HTML HyperText Markup Language 각각의 역할과 명칭을 가지고 있는 태그를 통해 텍스트에 생명을 불어넣는 것과 같다. 여기는 내용 이렇게 태그를 붙이는 작업을 markup이라고 한다. 내용을 같은 이름의 태그로 감싸주며, 앞/뒤 태그를 여는 태그와 닫는 태그라고 한다. 그렇지않은 것들도 있지만 대부분의 태그는 이런 식이다. 여기는 내용 내용을 감싸는 태그와 내용까지를 묶어서 '요소(Element)'라고 한다. 여기는 내용 여는 태그에서 한 칸 띄고, 적어준 부분을 '속성(Attribute)'이라고 한다. 하나의 HTML 요소에 특정 스타일을 적용할 타겟을 특정한다고 보면 된다. 속성이름="속성값"의 형태로 구성되어 있고, 한 요소에 복수의 속성값을 줄 수도 있다. 속성을 쓸 수 없다.. 2023. 12. 12. [프론트엔드스쿨 9기]1주차 후기 멋쟁이사자처럼 프론트엔드 스쿨에 지원하고 벌써 한 달 반정도 지났다. 지원할 때와 합격 한 후에 테킷과 HRD에 각각 수강 신청을 몇 번이나 하게 하고, 1차 서류 전형과 2차 영상 과제 절차까지 약간 번거로운 점이 있었다. 수강 기간동안 출석 인정 방식도 까다롭다면 까다로울 수 있다. 하지만 첫 주 강의를 듣고나니 번거로운 절차가 필요할 만 하더라. 국비 교육의 선입견을 깨고, 만족스러운 강의와 운영 방식이었다. 이렇게 질 좋은 부트캠프에 참여하는데 있어서 과정의 끝까지 함께 달릴 사람들로 모집해야하니 앞선 절차들과 출석 방식은 당연한 것이었다. 직전에 유료 부트캠프에 참여했다가 굉장히 실망하고 나온 경험이 있었기에 더 만족스럽게 느꼈을지 모른다. 지금 하고 있는 HTML, CSS 파트는 이종찬 강사님.. 2023. 12. 10. [과제]프로필 페이지 만들기 첫 과제는 상단의 preview처럼 내 프로필 페이지를 만드는 것이었다. 구성 요소는 동일하게 하되, 내용은 수정할 수 있다. 전체적으로 한 번 강사님과 풀이해보는 시간이 있었고, 과제 제출은 그로부터 이틀 후였다. 처음에 직접 코드를 작성할 때는 HTML로 마크업 먼저 하고나서 CSS로 스타일을 입혀줬다. 어찌저찌 프리뷰와 비슷하게 구현은 할 수 있었다. 코드가 엉망일뿐이다 ㅎㅎ. 강사님과 풀이를 함께 하면서 '아~!'하고 깨닫는 순간이 엄청 많았다. name contents section 1 section 2 footer 3. 콘텐츠는 천천히 채워가며 스타일을 수정한다. 왼쪽은 실습과 코드 풀이 강의를 거친 후, 대부분의 코드가 수정된거고, 오른쪽은 혼자 다시 만들고 과제로 제출한 상태이다. 이미지라.. 2023. 12. 10. 이전 1 2 3 4 다음
