post-thumbnail

반투명한 안쪽 테두리가 있는 이미지

이를 위해 세가지 조건이 필요하다.1\. 투명할 것2\. 이미지 위에 있는 요소여야 할 것3\. 균일한 두께의 테두리 여야 할 것처음에는 그냥 border를 적용했지만, border는 이미지 위에 적용되지 않고 바깥에 적용되어서 border가 일러스트레이터처럼 정교하게

2021년 2월 21일
·
0개의 댓글
post-thumbnail

#9 인스타 클론사이트제작-1

멘토님께 인스타 클론 사이트를 제작하라는 퀘스트를 받았다.아직 html과 css 밖에 모르는데 js는 심지어 아직 개념에 대한 수업만 조금 받았을 뿐인데, 이런 나도 제작이 가능할까?우선 새롭게 설계하기 전에 로그인 페이지를 검사, 분석했다.크게 section이 있었고

2021년 1월 4일
·
0개의 댓글
post-thumbnail

[8] 쌓임맥락

보이시는지 모르겠다. 스크롤 했을 때, 비디오가 스티키 네비게이션 바의 밑으로 겨들어가야 하는데, 자꾸 덮어버린다. 내가 아는 바로는 먼저 적힌 요소가 맨 위에 나온다는 것인데 이건 왜이러는지 모르겠다, 원. 하여간에 이런 연유로 쌓임맥락에 대해 공부해보려 한다.MDN

2021년 1월 1일
·
0개의 댓글

[7] reset.css/ box style

지난 번 받은 코드리뷰를 따라 알아보았다.리셋 css는 각 브라우저의 기본 스타일을 초기화 시키는 스타일 시트다. normalize.css 라는 것도 있는데, 노멀한 스타일로 만드는 스타일 시트인 듯 하다. 근데 노멀의 기준이 다 다르니 잘 안쓰일 듯?출처: https

2020년 12월 26일
·
0개의 댓글

[6] flexbox 속성 공부 with 네이버D2

요약일반적으로 웹페이지 레이아웃은 display, float, position 등과 같은 속성을 사용해 구현방법이 어려웠지만, 플렉스를 이용하면 레이아웃의 구현이 쉬워진다.속성이나 속성값은 내가 적은 것 외에도 더 있는 것 같았는데 전부 파악하기 어려웠다.

2020년 12월 26일
·
0개의 댓글

[5] link rel="?"

예제에는 link rel="stylesheet"라고 되어 있길래 alt 같은 이름을 넣는 것인줄 알았는데, a태그의 href+type 같은 속성값이었다. rel="스타일 시트로 사용할거야!"출처::TCP School

2020년 12월 25일
·
0개의 댓글

[4] position 의 이해

생활코딩은 내게 낚시하는 방법의 기초를 알려주었고, 검색의 힘을 길러야한다는 뼈가 되고 살이 되는 조언을 해줬다. 지금까지 웬만한 태그들은 검색해보면 구체적으로 어떤 역할을 하는 것인지 알게 되거나 활용함으로써 알 수 있었는데, position은 정말 봐도봐도 헷갈리는

2020년 12월 25일
·
0개의 댓글

[3] 미디어쿼리

생활코딩 web2 css-12, 13번째 강좌 미디어 쿼리 쓰기와 써먹기 였다.생활코딩 특성상 정확한 개념보다는 이게 어떻게 활용되는지에 더 중점을 두어서(뒤에 있는 강좌에서 설명해주실수도 있지만), 직접 찾아보기로 했다. @는 무슨뜻인지.mediaquery의 줄임말로

2020년 12월 19일
·
0개의 댓글
post-thumbnail

[2] 선택자{ }와 리스트

최근에는 생활코딩에서 선택자를 배우는데 재미있는 부분들이 있었다. 무엇보다 수포자였던 내가 수학의 필요성을 다시금 느끼고 있다. 아래는 선택자와 선언, 속성, 값으로 이루어진 스타일 규칙이다.이번 강의에서는 id, class 를 배웠는데, id는 id="active"가

2020년 12월 18일
·
0개의 댓글
post-thumbnail

[1] 코딩 공부를 시작한 미대생

어렸을 적부터 만화를 좋아했던 소녀는 순수미술을 전공하며 현대미술을 공부하다가 졸업을 앞둔 현재 타닥타닥 벨로그를 작성하며 개발자가 되기 위한 준비를 하고 있다. 전혀 다른 분야에서 시작했기에 왜 코딩 공부를 시작했냐고 물어보는 사람들도 있다. 나는 중학교 2학년 때부

2020년 12월 16일
·
0개의 댓글