본문 바로가기

전체 글

 (30)
[제로베이스 부트캠프] - 프론트엔드 스쿨 23기 HTML/CSS 과제 후기 제로베이스 프론트엔드 스쿨에서 HTML/CSS 공부하면서 느낀 점 드디어 한 달 간의 부트캠프 기간이 지나고, html/css 스케쥴은 이번주로 얼추 마무리가 되었다. 1차 과제인 html/css 과제를 제출하고, 느낀 점과 이런저런 장단점을 정리해보려 한다. 일하면서도 알고 있던 사실이지만 제로베이스 프론트엔드 스쿨에서 html/css 공부를 하면서 바쁘게 퍼블리셔로 일하다 보니 마크업 공부가 소홀했다는 생각이 들었다. 자주 안써서 떠오르지 않았던 속성 값도 있었고, 너무 자주 써서 잘 안다고 생각했는데 막상 질문에 답하려니 명확하고 간결하게 설명하지 못하겠는 속성도 있었다. 이번 html/css 공부를 하면서 막연하게 알던 속성들에 대해 명확한 정보들로 많이 보강했고 설명하는 법도 늘었다. HTML/..
[제로베이스 부트캠프] - 프론트엔드 스쿨 23기 한 달 후기 지난 한 달 후기 제로베이스 부트캠프 프론트엔드 스쿨 과정을 시작한지 벌써 한 달이 되어간다. 생각보다 정신없이 바쁜 나날을 보냈고, 마크업 기간은 여유가 있을거라 생각했던 것도 착각이었다. 단순히 강의를 들을 뿐 아니라 해야할 과제가 다방면으로 많았다. 한 달 동안 todolist 를 해내면서 느낀 점은, 커리큘럼대로 잘 따라간다면 취업을 못할 수는 없겠다 싶었다. 국비교육과 비교했던 시간들이 무색하게도 커리큘럼이 탄탄하다 못해 버거울 정도로 꽉꽉 채워져 있다. 근데 그게 바로 원하던 스케쥴이라 좀 바빠도 뿌듯하고 재밌었다. 가장 좋았던 점은 CS 강의..!!! 비전공자에게는 더없이 좋은 강의였다. 진짜 순차적으로 기초를 탄탄하게 알려주신다. 들어보지도 못한 내용에.. 알려주지 않았다면 하나하나 찾아보..
[Web 기초] - 시멘틱 웹(Semantic Web) 이란? (ft. 시멘틱 태그) 시멘틱 웹(Semantic Web) Semantic 이란 직역하면 '의미론적' 이라는 의미로, 웹 상에서는 '의미론적인 코드 조각'을 뜻한다. 이렇게 의미를 가진 요소들을 html에서는 '시멘틱 태그(Semantic Tag)'라 불리며, 시멘틱 태그들로 구성된 웹을 '시멘틱 웹(Semantic Web)' 이라 한다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. 시멘틱 태그(Semantic Tag)란? 시멘틱 태그들은 브라우저 상에 어떻게 보여질지가 아니라, 태그 자체로 어떤 의미를 가지고 어떤 역할을 하는지를 나타낸다. HTML5 이전까지는 의미를 갖지 않은 div / span 과 같은 요소들로 block / inline container를 구분하고 c..
[Web 기초] - 웹 표준, 웹 접근성, 크로스 브라우징의 관계 웹 표준 (Web Standards) HTML5는 2014년에 W3C에서 공식으로 표준화 되었다. 이전에는 익스플로러의 액티브X처럼 독자적인 플러그인이 존재하기도 했는데, 다양한 브라우저를 사용하는 전세계 사람들에게 동등하게 웹 페이지를 보여주기 어려웠다. 웹 표준을 준수하여 작성한다면 운영체제, 브라우저마다 의도 된 대로 보여지는 웹 페이지를 만들 수 있다. 웹 접근성 (Web Accessibility) 웹 접근성은 장애를 가진 사람 뿐만 아니라 장애를 가지지 않은 사람 모두가 웹 사이트를 동등하게 이용할 수 있게 하는 방식을 가리킨다. 웹 브라우징에 쓰이는 보조과학기술: 스크린리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등 크로스 브라우징이란 ? = 웹 호환성 (Cross Browsing) 흔히..
취업 활동 목표 설정하기_ft. 내가 가고 싶은 회사 회사를 그만두고 개발자로의 능력치 업그레이드를 위해제로베이스에 등록하고 열심히 달리기 시작한 요즘,본격적인 취업 활동을 시작하기 전에 생각해 둔 목표를 정리하려 한다. 내가 가고 싶은 회사 선정 기준 1. 애니메이션 활용 이전 회사에서 퍼블리셔로 일하면서 수많은 디자인을 퍼블리싱 했는데,프랜차이즈 외식 업체 홈페이지 특성상네모네모 디자인이 아니라 레이아웃 자체를 넓게 쓰면서 항상 새롭고 화려한 레이아웃과 애니메이션들을 구현해야 했다. 디자이너 분들도 늘 새로운 도전을 하시고선배 분들도 늘 처음보고 도전하는 애니메이션들이었기 때문에오로지 각자 알아서 구글링 열심히 해서 구현에 성공해야 했다. 처음에 햇병아리 시절에는 민폐끼칠까봐 땀뻘뻘,, 긴장하면서 야근했는데좀 익숙해지고는 새로운 모션 찾는 것도 즐겁고오..
[CSS] - 가상 요소 선택자 ::after / ::before 알아보기(ft. ::first- / selection) ✨가상 요소 선택자(Pseudo-Element Selector) 가상요소는 가상클래스와 달리, 요소의 상태에 따라 선택하는 선택자가 아니라 html에 존재하지 않는 가상의 요소를 만들어내는 선택자이다. 가상 요소 선택자는 :: (콜론)을 두 개 붙이고 작성하지만 하나만 붙여도 작동은 한다. 그러나 가상 클래스와의 구분을 위해 두 개로 작성하는 것을 권장한다. before / after 요소의 앞, 뒤에 가상 요소를 만들어 속성 값 중 content 값에 넣는 문자열로 된 내용을 삽입한다. 텍스트로 된 내용이 없다면 content: "" 으로 공백 값을 작성하고 display: block 등으로 꾸밈 요소를 만들어낼 수 있다. first-letter 텍스트나 문단의 첫 글자를 선택한다. first-line..
[CSS] - Flex box 의 container / item 속성 구분하기 ✨ Flexbox flex는 요소 내부의 아이템들을 정렬하는 속성으로, display: flex 를 지정한 container 에 적용 가능한 속성과 내부 아이템에 적용 가능한 속성들이 나뉜다. container 에 적용하는 속성은 부모(container) 기준으로 자식(item)들을 정렬하는 방식이라면, item 에 적용하는 속성은 flex box 내에서 할당된 각 아이템 영역 안에서 개별적으로 정렬되는 위치를 지정한다. flex container 속성 flex-direction : row / row-reverse / column / column-reverse flex-wrap : wrap / nowrap / wrap-reverse (wrap이면서 방향이 reverse) flex-flow : direct..
[CSS] - Float 속성 이해하기 ✨ Float 특정 요소를 둥둥 뜨는 것처럼, 별도의 레이어처럼 배치할 수 있다. 한 요소가 normal flow로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 주로 기사에 이미지와 텍스트를 나란히 배치할 때 사용되었고, css3가 나오기 전까지는 레이아웃을 구성하는데 자주 사용되었지만 flex 속성이 나오면서 사용 빈도가 줄어들어 용도가 확실할 때에만 사용한다. float : none normal flow에 따르는 기본 상태이며, 브라우저를 기준으로 z축 순서가 기본으로 정렬되어 있다. float : left / right 영역을 차지하기는 하지만, 뒷 줄에 작성된 요소들의 위에 둥둥 떠있는 레이어의 형태로 작동한다. 요소를 부모 기준으로..

티스토리툴바