인프런 커뮤니티 질문&답변
작성한 질문수
css.png?w=112&f=avif)
2가지 궁금한점
작성
·
447
0
1. 마지막수업 중간에 위치시키기
직접 가로세로의 절반을 뺴주는것말고,
contents의 가로와 세로길이를 코드상에서 구해서 절반을 빼주는방법이없나요?
(javascript의 offsetWidth함수를 사용해서 컨텐츠의 길이를 구하는 건알겠는데 css에 적용을 못하겠더라구요)
2. 마지막수업 버튼 링크
i태크를 a로 감싸서 링크를 주었는데, 이렇게하니까 작은 아이콘을 클릭해야만 하더라구요, 그래서 저는 흰 원안에만 클릭하면 되게끔하고싶은데 방법이 어떻게될까요?
li를 a태그로 감싸니까 안되더라구요.
답변 7
0
안녕하세요. 김진영님.
예제로 올려주신 코드는 그렇게 이해하는 게 맞습니다.
퍼센테이지가 상대적인 값이기 때문에 부모 태그의 넓이 높이가 전부 100%라면 고정 픽셀은 고정으로, 상대적인 수치인 퍼센트는 브라우저 창 크기에 따라 달라지는 게 맞습니다.
=============================
올려주신 이미지가 공지사항 이미지가 맞나요? 일단 소스가 어떻게 되어 있는지 확인이 되지 않아서 질문을 이해하기가 다소 난해합니다만, 원리적으로 설명해 드리면 새로운 컴포넌트가 생긴다고 무한정 div 태그 안에 div 태그를 만들어나가는 과정은 옳지 않습니다.
하나의 컴포넌트당 하나의 div 태그 그룹이라고 생각하시면 됩니다.
예를 들어서 이런 건 잘못된 겁니다.
1. 기준이 되는 홈페이지 코드가 있습니다.
2 홈페이지 코드 안에 한 개의 공지사항을 의미하는 코드가 있습니다.
3. 새로운 공지사항이 생겨서 한 개의 공지사항을 의미하는 코드 안에 또 공지사항을 의미하는 코드를 넣습니다.
4. 또 새로운 공지사항이 생겨서 2번의 공지사항 안의 3번의 공지사항 안에 새로운 공지사항을 의미하는 코드를 넣습니다.
이렇게 무한정으로 들어가는 방법은 당연히 안됩니다.
그런데 아래와 같은 방법은 됩니다.
1. 기준이 되는 홈페이지 코드가 있습니다.
2. 홈페이지 코드 안에 한 개의 공지사항을 의미하는 코드가 있습니다.
3. 새로운 공지사항이 생겨서 한 개의 공지사항을 의미하는 코드를 새로 짭니다. (2번과 형태가 다를 경우, 만약 같다면 그대로 태그를 복사&붙여 넣기해서 내용만 바꾸면 됩니다.)
4. 이렇게하면 공지사항을 의미하는 코드가 어떤 코드 안에 생기는게 아니고 각각 독립적으로 2개가 존재하게 됩니다.
5. 만약 또 새로운 공지가 생기면 별도의 공지사항을 의미하는 코드를 3번의 과정처럼 새로 만듭니다. 그러면 총 기준이 되는 홈페이지 코드 안에 공지사항 코드(div)가 별도로 3개 존재합니다.
그리고 만약 수작업으로 html을 수정해서 공지사항을 수정하는 상황이라고 한다면, div 태그가 너무 복잡해서 셀렉트를 못하겠다 싶으면 내가 작성한 css 코드부터 새롭게 클래스를 지정해서 거기서부터 시작하면 됩니다.
======
처음에 레이아웃 설계가 중요합니다. 만약 똑같은 디자인인데 내용만 달라지는 구조라면 당연히 HTML 태그와 CSS 속성(클래스)은 공유해서 사용할 수 있습니다.
그런데 만약, 매 공지사항 마다 HTML 태그도 달라지고 CSS도 달라진다면 각각 별도로 태그와 CSS를 작성하는 것 밖에 없습니다.
제가 질문을 잘 이해했는지 모르겠습니다만, 도움이 되시길 바라겠습니다. ^^
0
현재 개발자 한달차로 대학교홈페이지를 보고있습니다.
공부할때는 웹사이트 전체를 기준으로해서 하는것은 어렵지않았습니다만
실무에는 웹사이트에 작고 많은 컴포넌트들이 들어가있고, 이것을 각각 어떻게 배치했는지, 크기는 또 어떻게 줬는지 이해가 잘안가더라구요. 현재도 이해하려하고있구요.
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>text</title>
</head>
<body>
<div class="main">
<div class="main-background"></div>
<div class="contents__1">
<div class="contents-dotimg"></div>
<h1>이 연두색 박스는 Contents__1 입니다...</h1>
</div>
<div class="contents__2">
<h1>이 파란색 박스는 Contents__2 입니다</h1>
</div>
</div>
</body>
</html>
<CSS>
body, html, .main{
height: 100%;
}
.main > .main-background{
height: 100%;
background: orange;
background-size: cover;
z-index: -1;
}
.contents__1 {
/* 위치 */
position: absolute;
top:10%;
left:10%;
/* 크기 */
width: 400px;
height: 400px;
/* background:url(../img/test.jpg) no-repeat; */
background:olive;
background-size:cover;
}
.contents-dotimg{
width:50%;
height:50%;
background:url(../img/16.png);
z-index: 1000;
}
.contents__1 h1{
position:absolute;
top: 0;
font-size:30px;
color:red;
}
.contents__2 {
position:absolute;
top:50%;
left:50%;
width:40%;
height:40%;
background: blue;
}
.contents__2 h1{
font-size: 30px;
color: red;
}컨텐츠1은 width height를 400px이라는 절대적인 값으로 주었고
컨텐츠2는 각각 40% 상대적인 값으로 주었습니다.
이경우 웹사이트화면을 줄이거나 늘일때 컨텐츠1은 400px을 유지하지만, 켄턴츠2는 화면크기에 따라 그 퍼센티이지 만큼 변하는군요.
이렇게 이해하면 되는것 맞나요?
------------------------------------------------------------------------------------------------------------------
그리고 개인적으로 궁금한것이 있는데 강의내용과는 별개입니다만,
현재 제가 보고있는 대학홈페이지 소스(이 홈피를 만든 개발자는 퇴사하고 없습니다.)에 의문이 있습니다.
예를들어 홈페이지에 공지사항을 올리는 화면이 있습니다.
그 공지사항의 구성은 단순합니다.
근데 이 화면이 웹페이지에서 일부분이다보니 수많은 div의 안에 안에 안에 존재합니다.
보아하니 영역을 나눌때마다(컴포넌트가 생길때마다) div태그를 사용하고 거기에 class를 부여하고
css로 나누고 있습니다. 불편한건 일단 해당 코드가 숨어있는 느낌이고, 수정할때도 선택자를 어떻게 줘야할지
너무 헷갈립니다.
이런 html 작성방법이 맞는건지 궁금합니다 .. (제가 아직 안익숙해서 그런걸까요?)
제가 독학했을때 div는 시멘틱 요소가 없습니다. 즉 html상에서 아무의미가 없다고 알고있습니다.
영역 즉 컴포넌트들을 여러개 만들고 배치할때는 이렇게 div태그에 클래스값으로 밖에 하는 방법밖에없을까요?
0
안녕하세요. 김진영님 :)
배움에 죄송은 없습니다. 절대로 죄송하지 마세요!
일단 질문 주신 내용이 무슨 말인지 이해는 했습니다만, 글로 잘 설명이 될지 모르겠네요.
그래도 열심히 적어보도록 하겠습니다.
일단 이 프로젝트에서 width와 height를 부모 태그들에게 전부 100%를 준 이유는 속성의 값으로 사용되는 100%는 우리가 일반적으로 인식하는 100%와 조금 다르게 동작하기 때문입니다.
이 중에서 width 속성은 100%가 생각하는 것처럼 가로로 꽉 찬 크기가 형성되지만, height 속성의 100%가 그렇습니다.
자, 아래의 코드로 예를 들어봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>height 100%</title>
</head>
<body>
<div style="width:100%; height:100%; background-color:red;"></div>
</body>
</html>body 태그 하위에는 div 태그 하나만 있습니다.
div 태그에는 넓이와 높이가 100%로 지정돼 있고 배경 색상을 빨간색으로 지정했습니다.
그러면 웹 브라우저에서 해당 코드를 실행해보면 빨간색 배경이 전체적으로 설정이 되었을까요? 실행해 보시면 아시겠지만 설정되지 않는 걸 확인하실 수 있습니다. (div 태그에 아무런 텍스트도 없으면 높이는 0으로 보이실 겁니다.)
div 태그의 넓이와 높이를 확인해보면 넓이는 브라우저의 가로 크기만큼 설정되었는데 높이는 0으로 설정된 걸 확인하실 수 있습니다.
넓이는 웹 브라우저의 가로 크기만큼 설정이 되는 이유는 div 태그는 블록 태그로 웹 브라우저에서 블록 태그는 기본적으로 웹 브라우저의 가로 크기 전체만큼 넓이가 설정되도록 설정되어 있기 때문입니다.
반면 높이는 다릅니다. 높이에 대한 기준은 웹 브라우저에서 미리 블록 태그의 가로처럼 정의해 놓지 않습니다. 따라서 사용자가 height 속성을 이용해서 높이 값을 지정해주어야 합니다.
그래서 예제 코드에서 height 속성을 사용해서 100%를 지정했는데, 웹 브라우저의 높이가 꽉 차지 않습니다. 이유는 간단합니다. 우리가 인식하는 100%라는 수치와 코드가 인식하는 100%라는 수치가 조금 차이가 있기 때문입니다.
코드에서의 100%라는 수치는 '상대적인 수치'입니다. 만약 div 태그에서 height 100%를 지정했다고 하면 자신의 부모 태그의 넓이나 높이를 기준으로 상대적인 수치인 100%만큼 크기가 지정이 되는 겁니다.
그런데 위 예제 코드에서는 흔한 텍스트조차 한 줄 없음으로 body 태그도 높이가 0입니다. (크롬 개발자도구를 이용해서 body 태그의 높이를 확인해보세요)
그럼 div 태그 입장에서는 부모가 가지고 있는 높이에서 상대적인 100%의 수치를 자신의 높이로 가질 수 있는데 부모도 0이니까 0의 100%는 0, 그래서 div 태그의 높이는 0인 겁니다.
그러면 이러한 상태를 해결하기 위해서는 어떻게 해야 할까요? div 태그의 부모 태그가 높이 값을 가질 수 있도록 해주는 겁니다. 그래서 body 태그도 높이 값을 100%로 지정합니다.
그런데 body 태그도 높이가 100%가 바로 적용이 안 됩니다. 왜냐면 말씀드렸다시피 100%는 부모 태그가 가지는 크기 또는 높이의 상대적인 수치인데 body 태그의 부모 태그인 html 태그도 높이가 0이거든요.
그래서 html 태그도 높이를 지정해주기 위해서 100%로 지정을 합니다. 그러면 비로소 모든 태그가 100%라는 수치를 똑같이 가질 수 있게 되는 거예요.
서론이 길었습니다.
여기서 포인트는 100%는 '상대적인 수치'라는 점입니다.
만약 국소적인 영역에서 꽉 차게 하고 싶으면 그 국소적인 영역의 넓이와 높이를 px로 고정해서 지정하시면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>100%</title>
</head>
<body>
<div style="width:500px; height: 500px;">
<div style="width:100%; height: 100%; background: red;"></div>
</div>
</body>
</html>위의 코드에서 보면 국소적인 영역의 넓이와 높이를 500px로 설정하고 그 자식 태그인 div 태그에 넓이와 높이를 100%로 지정했습니다.
자식 태그에 적용돼 있는 100%는 부모 넓이와 높이에 상대적인 수치이므로, 지금처럼 부모 넓이와 높이가 500px로 명확하게 지정이 돼 있다면, 그 자식 태그의 100%라는 수치는 500px의 수치를 기준으로 100%라는 수치만큼 그대로 지정되게 되는 겁니다 :)
본 강의에서는 웹 브라우저 전체 크기를 맞추기 위해서 100%라고 지정했지만, 사실 그 과정들이 100%라는 수치를 제대로 설정해주기 위해서 100% 수치의 상대적인 기준이 되는 부모 태그들의 넓이나 높이를 지정하기 위한 과정이었다고 이해해주시면 되겠습니다.
이해가 안 되시면 다시 질문해주세요 :)
0
안녕하세요.. 시간이 많이 지났지만.. 현재 공부진행중인데 궁금한점 여쭤봅니다.
이강의에서는 웹사이트 전체로 잡고 배경화면을 설정해주었습니다.
그리고 그 내용중에 "부모태그도 다 width:100% 로 해주어야한다." 라는 내용이 있었습니다.
제가 궁금한것은, 극단적으로 웹사이트의 크기가 매우크고,
그안에서 일정부분에 컴포넌트(?) 의 배경화면만 위 강좌처럼 설정해준다고할때...
부모인 태그모두를 일일히 다 설정해주어야 하는것인가요?
부족한 부분이 많아 질문마저 미흡한점... 죄송합니다.
0
안녕하세요 김진영님.
레이아웃 배치는 그룹 태그인 div span 태그에 대한 이해와 display, position, float 등등 위치 관련 css 속성에 익숙해지셔야 합니다 ^^
강좌 소개페이지에 안내되어있는 수카데미 유튜브채널이나 공식사이트에 오시면 도움이 되실 수도 있으니까 참고부탁드립니다.^^
0
오.. 감사합니다.
아직 HTML,CSS에서 레이아웃(배치하고싶은곳에 배치) 만지는 법을 잘모르겠는데..
어떻게 공부하면 될까요... 이런강의처럼 만져보면서 좀 배우고 싶어요.ㅠㅠ
0
안녕하세요. 김진영님
질문에 답변을 드리도록 하겠습니다.
1. transform: translate(-50%, -50%) 속성을 적용하면 직접 수동으로 계산하지 않아도 됩니다 :)
2. li 태그는 다른 태그로 감쌀 수 없습니다 ^^ 방법이 여러가지가 있을 수 있겠지만 a 태그에 display:inline-block 속성을 지정하고 width와 height 속성을 사용해서 li 태그의 넓이와 높이만큼 크게 하면 해결할 수 있을것 같습니다.
더 도움이 필요하시면 다시 질문해주세요^^