본문 바로가기

분류 전체보기

 (239)
[HTML/CSS] #15.attribute selector attribute selector은 말그대로 특정 속성을 선택하는 역할을 한다. Pseudo Selector의 일종이라 볼 수 있다. 다음의 코드를 보자. 그리고 결과를 보면 다음과 같다. 결과를 보면 알 수 있듯이 name이 들어간 input칸의 뒷배경의 색이 모두 핑크색으로 바뀌었다. 이는 다음의 코드 덕분이다! input[placeholder~="name"] { background-color: pink; } placeholder에 name이 포함되어있으면 뒷배경을 모두 핑크색으로 바꿔주라는 의미가 된다. 여기서 '~='는 포함되어있다는 의미다! attribute selector는 이것말고도 쓰임이 많은데 그 내용을 아래의 사이트에서 확인 가능하다. https://developer.mozilla.or..
[HTML/CSS] #14.Combinators html을 다루다 보면 부모 태그 안에서 자식 태그를 찾아 스타일을 적용해야하는 일이 있을 수 있다. 다음의 코드를 보자. hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi et sequi ipsam odio dolorem. inside 그리고 결과를 확인해보면 div안에 있는 모든 span에 스타일이 적용되었음을 확인할 수 있다. 우리가 코드에서 주목해야할 부분은 'div span'인데 이는 div밑에 있는 모든 span에 스타일을 적용시켜주겠다는 의미가 된다. div 바로 밑에 있는 span에만 스타일을 적용하는 방법도 있다. 위 코드에서 'div span'부분을 다음과 같이 수정해보자. div > span { te..
[HTML/CSS] #13.Pseudo Selector 우리가 코딩을 하다보면 좀 더 세부적으로 엘리먼트를 선택해야 할 일이 있다. 이 때 사용하는 것이 Pseudo Selector이다. 다음의 코드를 보자. 5개의 div블록을 만들고 맨 위에 있는 블록은 red색, 맨 아래에 있는 블록은 teal색이 되도록 Pseudo Selector를 이용해 만들어 보았다. 결과를 확인해보자. 원하는 대로 색깔이 바뀌었다! 물론 class나 id를 만들어서 색을 바꿔줄 수도 있겠지만 html코드를 변경해줄 필요가 없어 이 방법이 훨씬 낫다. Pseudo Selector는 종류가 엄청나게 많다. 하나 더 사용을 해보자. hello hello hello hello hello 이번에는 nth-child를 이용해 2번째 자식 엘리먼트를 선택에 세부조작을 해주었다. 참고로 괄호에..
[HTML/CSS] #12. position: fixed, relative, absolute 웹사이트를 제작하다 스크롤을 내려도 특정 박스를 고정시켜야 할 일이 있다. 이때 사용하는 것이 fixed이다. fixed는 element가 처음 생성된 자리에 고정시킨다. 다음의 코드를 보자. 보다시피 아래 박스에 fixed를 적용하였다. 그리고 결과를 확인해보면 정말 스크롤을 내려보아도 아래 박스는 제자리에 고정되어 움직이지 않는다. 이번엔 아래 박스에 top: 100px를 추가해보자. #different { width: 350px; top: 100px; background-color: wheat; position: fixed; } 그리고 결과를 확인해보면 보다시피 노란색 박스가 초록색 박스 위로 올라가 있다. 즉 완전히 다른 레이어가 된 것이다. fixed로 고정을 시킨 상태에서 top, left, ..
[HTML/CSS] #11.Media Query (반응형 웹디자인) PC, 스마트폰, 태블릿 등등 다양한 디바이스들이 웹브라우저를 지원하면서 화면의 크기에 따라 유연하게 컨텐츠를 조절하는 기술이 더욱 중요하게 되었다. 이를 가능하게 하는 기술이 바로 미디어쿼리(Media Query)다. 다음의 코드를 보자. Sugar 위 코드에서 보다시피 미디어쿼리의 기본문법구조는 다음과 같다는 것을 알 수 있다. @media (조건) { 스타일 } 이제 좁은화면 스타일링을 해보자. 휴대폰처럼 작은화면에서만 'SUGAR'라는 단어가 보이도록 하고 싶다면 위 코드처럼 min-width 조건문을 넣어주면 된다. min-width : 1200px는 screen width > 1200px라는 부등식과 같다. 즉, 1200px보다 화면이 커지는 순간 diplay : none을 적용한다. 직접 코..
[HTML/CSS] #10.flexbox flexbox는 CSS의 레이아웃 기술 중 하나이다. 앞서 grid로 레이아웃을 만들었는데, 차이점이 무엇일까?? 둘의 차이는 Flex는 1차원으로 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있는데 반면 Grid는 2차원으로 수평 수직 동시에 영역을 나눌 수 있다는 점이다. 그렇다면 flexbox는 어떻게 사용할까? 다음의 코드를 보자. 1. 우선 자식 엘리멘트에 해당하는 박스들을 우리가 원하는 곳에 배치하기 위해서 부모 엘리먼트를 flex container로 만들어준다. 여기서는 body태그를 flex container로 만들어주었다. 2. 그리고 스타일로 가서 display: flex를 써주었다. 3. display: flex 써주면 아래의 기능을 사용할 수 있다. - justify-c..
[HTML/CSS] #9.그리드 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나눌 때 사용한다. 사용방법이 간단하기도 하고 대부분의 주요 브라우저에서 지원하는 기술이기 때문에 웹프론트엔드 개발자라면 반드시 알아두는 것이 좋다. 그렇다면 이 그리드라는 기술은 어떻게 사용할까? 다음의 코드를 보자. NAVIGATION ARTICLE body태그 안의 div에 주목하자. div태그는 아무것도 표현을 하지는 않지만 다른 요소 여럿을 묶어 다른 요소들과 구분하는 용도로 쓰인다. 레이아웃 하고 싶은 요소들의 가장 바깥쪽에 div태그로 감싸주고 id값을 주자. (자식 엘리먼트를 다루기 위해서 부모 엘리먼트로 감싸줌) 그렇게 하면 이제 안쪽에 있는 요소들을 레이아웃 할 수 있다. (안쪽의 요소들은 필요시 div태그로 ..
[HTML/CSS] #8.박스 모델 HTML요소는 박스모양으로 구성되며, 이를 박스모델이라고 부른다. 박스 모델은 다음과 같이 구분한다. 1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 2. 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다. 개념은 이정도만 보고 다음의 코드를 보자. 나의 현재 포털사이트에서 정보 검색을 해보자. 코드의 결과는 다음과 같다. 보다시피 h1태그 요소는 한 줄 전체를 차지하고 a태그 요소는 자기 자신의 크기만큼만 차지함을 알 수 있다. 한 줄 전체를 차지하는 것을 block level e..

티스토리툴바