#grid ol 와 기존 ol에 padding-left:33px를 같이 주는 것이 결과가 같을 수 있으나 의미가 다릅니다.
#grid ol은 <div id="grid">내의 ol에 적용되는 것이고 기존 ol에 padding-left:33px를 적으면 적으신 ol에만 적용됩니다.
늘 말씀하시는 것이지만 극단적으로 가보죠.
div내에 수많은 ol이 있다면 어떻게 하실 건가요?
일일이 하나하나 ol에 padding값을 적을 건가요? 힘들고 중복이 많아 코드가 지저분해집니다.
그때 style에 #grid ol를 적어놓고 수많은 ol들을 div로 묶어 여기에 id="grid"를 적는다면?
이 이후로는 알아서 모든 ol에 grid값이 적용될 겁니다.
ol의 padding-left:33px 값을 #grid ol에 따로주지 않고 기존 ol에 padding-left:33px를 같이 줘도 되지 않나요? 구동해보니 차이가 없는데, 하나씩 고쳐나가는 과정에서 설명을 위해 #grid ol 값을 별도로 만드신거라고 보면 될지 궁금합니다.
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id ="article">
<h2>css</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>
혹시 더블클릭해서 패딩, 마진 조절하는 부분 이해 안되시는 분들을 위해서,
이고잉님이 말하신 더블 클릭은 숫자 더블클릭해서 일단 선택 하라는 것이었구요.
숫자가 선택 된 이후 화살표 위, 아래를 이용해 조절하시면 됩니다.
저도 2시간 정도 해매다 찾아서 나중에 공부하시는 분들을 해매지 않았으면 좋겠네요 :)