🥬 상추의 공간

카드 전체에 border-radius를 줬는데 이미지 윗부분에는 적용이 안되는 것이다. 그렇다고 img에도 border-radius를 주기에는 너무 이미지 아랫부분이 어색하다. 방법 1 border-radius는 아래와 같이 세부적으로 더 나눌 수 있다. border-top-left-radius: 값; border-top-right-radius: 값; border-bottom-left-radius: 값; border-bottom-left-radius: 값; 위 방법으로 top-left와 top-right에 border-radius를 줬더니 원하는대로 됐다! border-bottom-left-radius - CSS: Cascading Style Sheets | MDN The border-bottom-lef..

overflow 넘치는 글을 scroll로 할 수 있는 방법은 overflow 속성을 이용하면 된다. overflow: scroll; -> 가로, 세로 둘 다 스크롤이 생긴다 overflow-x: scroll; -> 가로 스크롤이 생긴다 overflow-y: scroll; -> 세로 스크롤이 생긴다 scroll로 하면 항상 scroll이 생기는데 auto로 하면 글이 넘칠때만 scroll이 생긴다. overflow는 이 외에도 여러 기능이 있다. 아래 MDN에서 확인 할 수 있다. overflow - CSS: Cascading Style Sheets | MDN overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-..

개발을 하는 도중... footer를 페이지 가장 하단에 고정시키고 싶은데 자꾸 어중간한 위치에 있는 것이다.. (페이지 중간쯤?) body, html의 height를 100%, footer를 postion: absolute하고 bottom: 0을 해놓은 상태인데도 말이다. 페이지를 개발자 모드로 봤더니 화면 전체크기가 1519x742로 설정되어 있는 것이다.(높이는 개발자 모드로 인해 좀 작아진 상태) '읭? body의 height를 분명 100%설정했고, 스크롤도 될 정도로 height가 꽤 되는데 height가 왜 742밖에 안되지???' 결론은 position: absolute 때문이었다. position 값을 주면(static제외) 레이아웃이 달라져(z-index 자연스래 적용돼서) height..

이번 시간에는 기본적인 HTML tag를 알아볼 것이다. 제목 Tag 크기에 따라 ~으로 나뉜다. 본문 Tag : 단락 or 문단 : 형식화된 텍스트 : 줄바꿈 수행 그 외에 등이 있다 글자 Tag : 볼드체 : 이탈릭체 : 문장을 위로 : 문장을 아래로 : 밑줄 : 취소선 링크 Tag : 하이퍼 링크의 역할을 수행 href(Hypertext Reference) 속성 : 웹 사이트 주소를 정한다. target 속성 : 링크를 클릭했을 때, 해당 페이지를 어떻게 열 지 정한다. _self: 현재 탭에서 링크를 연다 _blank: 새 탭 or 새 창에서 링크를 연다. '상추의 tistory'를 누르면 새 탭에서 href 속성에 지정한 주소로 이동한다. 이미지 Tag : 이미지 넣고 싶을 때 사용 (종료 태그..

HTML 구조 다음은 기본적인 html 코드이다. 뭐가 뭔지 모르겠어도 한번 직접 분석해보자. Hello world! 크게 보면 태그 안에 , 로 나뉘어져 있다. 대체적으로 태그들이 열고 닫는 형태임을 볼 수 있다. 태그 처럼 그냥 혼자로만 닫는 태그(self-closing tag)도 있다. 몇몇 태그에는 부가적으로 속성이 있는걸 볼 수있다. 예를 들어 태그는 이렇게 lang이라고 부가적으로 붙는 게 있다. 이런걸 속성(attribute) 라고 부른다. 코드를 순서대로 분석해보자면 : '이것은 html문서다!' 라고 알려주는 역할이다. 첫 라인에 필수적으로 넣어준다. : html코드의 시작점. lang속성은 검색엔진에게 주된 사용언어를 알려준다. (한국어: ko, 영어: en, 일본어: jp ...) :..

웹사이트 구조 우리들이 흔히 보는 웹페이지는 이런 식으로 구성되어있다. (물론 무조건 aside가 무조건 있고 footer가 있는 건 아니다. 대략 이런식으로 구성되어 있다) 밑에 예시를 보자 대충 맨 위 색깔과 맞춰서 구분지어 놨다. 여기서 더 분할할 수 있고, 정답은 없다. 뭐든지 box model로 세분화해서 나눠보는 연습을 하는게 좋다. 여기서 box는 sectioning이 되는 것을 말한다.

웹사이트는 text 파일이 만든다. text 파일이 브라우저에게 코드를 전달하고, 브라우저가 그 코드를 이해하고 구현해서 사용자에게 출력하는 것이다. 웹사이트(프론트)를 만들 때 사용되는 언어는 HTML, CSS, Javascript가 있다. HTML이란? HTML은 HyperText Markup Language 의 약자로 말 그대로 '컨텐츠의 구조를 정의하는 마크업 언어'이다. 컨텐츠(내용)에 태그(마크)를 씌워 구조를 구분하여 정의한다. 브라우저는 멍청해서 사람들이 사용하는 언어를 이해 못한다. 즉, 우리의 웹사이트/Content를 이해 못한다. 우리가 해야 할 일은 브라우저에게 Content가 무엇인지 알려주는 것이다. (ex. title은 무엇이고, link가 무엇이고, 이건 이미지, 제목이야 등..