CSS Tutorial – Full Course for Beginners
Lesson 10 – Display
span {
display: inline-block;
background-color: #333;
color: whitesmoke;
padding: 4rem;
}
block 레벨은 100% width, inline 레벨은 content의 width 만큼만 차지
inline element에는 height, margin-top, bottom 적용 불가
display 속성을 inline-block으로 변경시에 적용 가능
block 처럼 줄바꿈이 되지는 않지만, inline에 적용되지 않던 것들을 적용할 수 있음
<ul> inline, <li> blockdisplay: none;으로 보이지 않게 할 수 있음
Lesson 11 – Floats
float 속성은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정
flow-root 사용 <section>
<div class="block left">Float</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ducimus minima magnam provident cum
libero,
quo cumque molestiae obcaecati modi?</p>
</section>
<p>Officia reiciendis pariatur velit dolor consectetur laborum. Obcaecati a similique ducimus, eos quod cum ea eum
qui sequi, odit unde?</p>
<p>Ipsum explicabo nemo quidem natus corporis asperiores fugit similique repellendus rerum quasi, rem repudiandae
maiores iste voluptatum odit, officia dicta.</p>
<div class="block right">Float</div>
<p>Aliquid adipisci, iusto itaque amet cumque placeat, assumenda laudantium recusandae nulla aperiam, dignissimos
laboriosam? Obcaecati cum aut in quaerat doloremque!</p>
<p>Repellendus reprehenderit nam inventore praesentium quas saepe neque aliquam deserunt, aliquid ad, quaerat in
repellat, ducimus alias quasi hic mollitia?</p>
body {
font-size: 1.5rem;
font-family: "Roboto", sans-serif;
}
.block {
width: 30vw;
height: 30vw;
background-color: black;
color: #fff;
padding: 1rem;
}
.left {
float: left;
margin-right: 1rem;
}
.right {
float: right;
margin-left: 1rem;
}
section {
background-color: bisque;
border: 1px solid #333;
padding: 1rem;
/* legacy
overflow: auto; */
display: flow-root;
}
flow-root 사용 전
display: flow-root; 사용시 해당 컨테이너 내부의 모든 요소가 컨테이너 범위를 벗어나지 않도록 함
<div class="container">
<header class="header">
<h1 id="title" class="text-center">freeCodeCamp Survey Form</h1>
<p id="description" class="description text-center">
Thank you for taking the time to help us improve the platform
</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required />
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required />
</div>
<div class="form-group">
<label id="number-label" for="number">Age<span class="clue">(optional)</span></label>
<input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age" />
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select id="dropdown" name="role" class="form-control" required>
<option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<p>Would you recommend freeCodeCamp to a friend?</p>
<label>
<input name="user-recommend" value="definitely" type="radio" class="input-radio" checked />Definitely</label>
<label>
<input name="user-recommend" value="maybe" type="radio" class="input-radio" />Maybe</label>
<label><input name="user-recommend" value="not-sure" type="radio" class="input-radio" />Not sure</label>
</div>
<div class="form-group">
<p>What is your favorite feature of freeCodeCamp?</p>
<select id="most-like" name="mostLike" class="form-control" required>
<option disabled selected value>Select an option</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="openSource">Open Source</option>
</select>
</div>
<div class="form-group">
<p>
What would you like to see improved?
<span class="clue">(Check all that apply)</span>
</p>
<label><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
Projects</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
Projects</label>
<label><input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox" />Data
Visualization</label>
<label><input name="prefer" value="challenges" type="checkbox" class="input-checkbox" />Challenges</label>
<label><input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox" />Open Source
Community</label>
<label><input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox" />Gitter help
rooms</label>
<label><input name="prefer" value="videos" type="checkbox" class="input-checkbox" />Videos</label>
<label><input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox" />City Meetups</label>
<label><input name="prefer" value="wiki" type="checkbox" class="input-checkbox" />Wiki</label>
<label><input name="prefer" value="forum" type="checkbox" class="input-checkbox" />Forum</label>
<label><input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox" />Additional
Courses</label>
</div>
<div class="form-group">
<p>Any comments or suggestions?</p>
<textarea id="comments" class="input-textarea" name="comment"
placeholder="Enter your comment here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</div>
</form>
</div>
label의 for 속성, input의 name 속성으로 서로를 연결시켜 줄 수 있음
라디오, 체크박스의 input / 드롭다운의 option에 value 속성을 넣어 서버로 넘길 값을 지정할 수 있음
라디오, 체크박스의 경우 name 속성을 같이 명시해서 어떤 내용의 값인지 구분(name이 key, value가 value 형태로 전달됨)
Related
