position의 fixed와 sticky | 똑같은 고정이 아니야 ✨천하제일 고정대회 출전자 position으로 요소들을 배치할 때, 레이아웃 고정에 이용되는 속성이 두종류가 있다. 대체로 fixed를 많이 쓰는것으로 알고 있었으나(나 또한 그래왔었고) sticky라는 속성을 알게 되면서 나 또한 이번 기회에 제대로 알게 되었었다. 둘의 차이는 어떻게 다른지 한번 보자. ✨화면 변동없이 계속 자리 고정이면 'fixed' 아무런 변동없이 특정 고정요소를 한 자리에 계속 놔두려면 fixed를 쓰면 된다. 가장 맨위 제목의 h2에 'title'이라는 클래스를 넣어주고 position을 fixed로 적용한 코드와 결과화면은 다음과 같다. sticky test 오늘의 메뉴1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. .. overflow:hidden vs display:none | 누가 무엇을 숨겼는가 ✨둘의 차이는 무엇일까? 일단 둘 다 무언가를 숨기는 property의 기능을 담당한다. 그러나 기본 기능상의 차이가 있는데, 먼저 코드의 예제를 살펴보도록 하자. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, voluptatibus porro omnis quod repellendus est deleniti, ipsum blanditiis cum, dolor fuga! Deserunt quod impedit dolorem sint, voluptas dolores cumque vel. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, voluptatibus porro .. margin 병합 현상 | 누가 내 마진을 먹었을까? ✨누가 나 몰래 margin을 먹은것같아요 css로 작업을 하다보면 가장 많이 스타일 적용하는것에 쓰이는것이 padding, 그리고 margin일것이다. 여기서 이 margin은 독특한 property인데, 기본적으로는 스타일을 정의하는데 있어 이로운 녀석이지만 위 아래로 margin이 붙을 경우 조금은 곤란한 상황이 벌어질 수 있다. 위 아래의 요소에 margin값이 붙어있다면, 그중 가장 큰 margin값으로 통일되어서 그 요소간 간격이 결정되는 상황이 생긴다. 즉 목소리가 큰 요소가 작은 요소의 margin을 잡아먹는 이 현상을 바로 'margin collapse', margin 병합(혹은 결합)현상이라 불린다. 대개 margin병합이 일어날 수 있는 환경은 인접해있는 블록요소끼리 상하단이 맞물려 .. HTML Living Standard(5) | table ✨HTML로 그려보는 table data 호랭이가 수락산에서 곰방대피며 떡 주워먹고 디아2하면서 해골굴에서 열심히 혼마술과 태양의기원 돌리던 시절... 당시 html의 레이아웃 코딩은 table로 레이아웃 잡는것이 트렌드였다. 지금의 코딩열풍이 있기전에 시대를 앞서간 html 코딩 열풍이 있었다. '장미가족의 태그교실'이라는 DAUM 카페를 시작으로 각각 지역의 컴퓨터학원이 기하급수적으로 늘어나기 시작했고 html과 나모웹에디터2.0을 이용하여 개인홈페이지 꾸미기가 트렌드였던 시절이 있었다. 친구들이 보습학원 갈 시간에 동네 형 따라서 컴퓨터 만지러 컴퓨터학원에 놀러가듯 드나들며 배웠던 그 html을 서른살이 넘은 지금 나의 주 언어가 되었을줄이야. 사람일은 정말 모른다. div 떡칠보다 더욱 난리부르스.. HTML Living Standard(4) | form 요소들 ✨form은 어떤 요소를 가지고 있을까? form 요소들은 특히 백엔드 개발자들과의 협업이 매우 중요하다. 사용자의 입력값을 데이터로 받아서 그걸 처리하고 가공하는데 해당 form요소들이 중요하기 때문. form 태그는 대표적인 요소로 action과 method를 가지는데, action은 데이터가 submit 되었을때 어떤 서버로 보내줄 것인가 결정하는 것이며 method는 서버로 값을 보내는데 보이게 보낼것인지(get) 안보이게 할것인지(post) 정하는 방식으로 설정된다. 쉽게 말해 공개적으로 내 tmi를 알려줄것인가, 포스트잇에 내 tmi를 적고 고백공격을 할것인지. 또한 하위 요소로 fieldset을 가지는데 form 내부의 영역을 나누게 되는 semantic 태그라 볼 수있다. 뒤이어 form의.. HTML Living Standard(3) | 각종이미지들 ✨이미지 태그는 만 쓰는것이 아님 지금까지 이미지 삽입할때는 태그만 사용하거나, 경로는 html로 지정하지 않고 css의 background-image 속성으로 이미지를 올리곤 했었다. 하지만 semantic 태그들과 스크린리더의 접근성을 위해서는 보다 세부적인 이미지 삽입의 태그가 필요한것. 또는 개념으로만 살짝 알고있던 것들을 다시한번 되짚어보도록 하자. 의 srcset 속성 사용자 브라우저의 width 값에 따라 이미지 사이즈가 변경된다면 대개 css의 Media Query를 종종 이용하긴 한다. 그러나 기획자나 PM들과의 협업중에 무엇으로 정하자고 결정함에 따라 html로 작업할지, css로 작업할지 결정한다고 함. 마라탕은 청탕으로 먹어야 제맛 태그를 이용할때 접근성을 위해 alt값 외 이미지에.. 이종찬 강사님 CSS 특강 | 행복하DA ✨ CSS는 무엇인가 html을 웹페이지를 구성하는 뼈대라고 구성한다면 css는 그 뼈대에 덧입혀지는 살거죽이라고 부를 수 있겠다. 또한 꾸미기 요소로 이루어진 요소로서 Cascading Style Sheet라고 부르며 말 그대로 계단식으로 하나하나 쌓아 올라가며 html을 꾸미는 언어라고 보면 된다. 과거 애매한 기간동안 퍼블리셔로 일하기 시작할때, 내가 코딩에 확 눈을 띄게 된 계기도 css로 작업하는 코딩 결과물들이었다. css 스타일링 작업은 진짜...진짜 완전 재미있다. 내가 만들어놓은 구조에 이거저거 올리면서 그게 또 바로바로 변하는 모습을 볼 수 있으니 코딩입문자들에게 배우기에 정말 적합한 웹언어가 아닐까 싶을 정도. 오늘은 특강 명사님으로 빔캠프의 이종찬(https://www.youtube.. HTML Living Standard(2) | Grouping contents ✨저 그러니까... 누구였더라? 나름 html 사용에 있어서는 어느정도는 알고있다고 자부했지만, 평소에 잘 안쓰던 태그들이라던가 적확한 용례를 제대로 알아봄에 있어서는 어느정도 아쉬운 부분은 있을 수 있다. 내 기준 평소에 잘 쓰지 않았던 태그들을 한번 정리해 보았다. ✨Grouping Contents CSS html에 살을 붙여주는 스타일 목록의 대표로 치면 ul(순서가 없는 목록), ol(순서가 있는 목록), li(목록의 요소들)들이 대부분이지만 어떠한 정의할것이 필요할때 쓰이는 목록. 쉽게 목록의 뜻을 풀어서 설명하자면 다음과 같다. dl : 정의목록, definition list dt : 정의할 용어, definition term dd : 용어를 설명, definition description 주.. Emmet 문법 | 코딩을 보다 쾌적하게 ✨사람은 도구를 쓸 줄 알아야... 지성을 가진 사람은 모름지기 도구를 쓸 줄 알아야 한다. 그리고 손가락이 휘날리는 키보드 예술의 경지라 칭할 수 있는 코딩을 함에 있어서 이 예술혼을 더욱 불태울 수 있는 보조도구가 있으리니 그것은 바로 키크론k8 Emmet 문법이라 칭하는 코드 에디터의 편의기능! 왠만한 html 에디터는 해당 기능이 기본 플러그인으로 내장되어 있으며 해당 기능을 익히면서 쾌적하게 이용해보자. ✨ Emmet 문법의 기본 태그들을 쓸때 띄워쓰면 안된다. space바 압수 자식요소 생성은 '>'을 이용하며 문장은 영문화권 베이스의 좌👉우 방향으로 읽는다 div태그는 기본 베이스. div에 클래스를 넣어 생성할 경우 div.(className) 넣는것이 아닌 '.'만 넣어서 생성 아이디는 .. HTML Living Standard(1) | 기본 개요 ✨HTML Living Standard가 뭐여? 지금까지 HTML(Hypertext Markup Language)은 여러가지 변화과정을 거쳐왔었다. 기본 초창기 처음 HTML부터 Sementic Tag (main, section, article 등의) 가 등장했던 HTML5, 그리고 현재의 HTML Living Standard. 현재 22년 3월 기준 쓰이고 있는 HTML 규격이라고 부를 수 있고, Living Standard 를 같이 쓰기보다는 우리가 일반적으로 부르는것처럼 HTML로 불려지는 것이 좋다고 한다. 사실 HTML5로 불려도 차이가 없다고 함. 기본적으로 대부분 많이 쓰이게 되는 태그는 사진에서 보여지는 태그들이 대부분. 사실 퍼블리셔로 일한적이 있었던지라, 기본적인 head 태그 라던가 .. 이전 1 다음
