The Curious Adventurer's Journey The Curious Adventurer's Journey

"brackets"라는 에디터에는빠른 편집 기능이 있습니다. 드래그 한 부분에서 [Ctrl] + [e] 를 하면, (맥에서는 [Command] + [e] 라고 하네요.)  관련 css 파일에서 연동되어 있는 부분을 보여줍니다. 알아두면 css 디자인을 할 때 아주 편리하겠죠?     비슷한 기능 바로가기https://free-weave.tistory.com/45 [brackets] 화면 분할하기"brackets"라는 에디터에는화면 분할하기 기능이 있습니다.  요 버튼을 누르면, 분할하기 관련된 메뉴가 표시됩니다.  기본적으로는 나누지 않음이나, 선택한 메뉴에 따라 창을 나누어서 사용할free-weave.tistory.com

title 태그라는 것이 있습니다.보통 일반적으로 '새 탭'의 이름이라고 하면 이해하기 쉬울 것 같네요. 아래와 같은 양식으로 사용되며,  이렇게 작성하여 미리보기 하면,탭의 이름으로 title 태그 안의 글자가 나오게 됩니다. 주의할 점은 너무 긴 title을 지정하지 않는 것입니다. 너무 긴 이름을 지정하면 말 줄임표(...) 처리가 될 수 있습니다. 그 특성상 하나의 title 태그만 사용 가능하며, 만약 2개 이상 작성 시에는 최상단의 1개만 적용됩니다.

HTML 문서에서 스타일을 적용할 때, 여러 가지 방법으로 스타일을 지정할 수 있습니다. 하지만 이렇게 지정된 스타일들이 충돌할 경우, 어떤 스타일이 적용될까요? 바로 스타일 적용 우선순위에 의해 결정됩니다.  1. !important 선언important 라는 영단어는 '중요한, 영향력이 있는' 이라는 의미를 가지죠. 그 말처럼, !important 선언이 들어가면 스타일에서 가장 높은 우선순위를 갖게 됩니다. 그렇기 때문에 남용해서는 안되고, 정말 중요할 때만 사용되어야 합니다.p { color:red !important;}  2. 인라인 스타일html 파일 내 스타일 속성 직접 부여하는 방식으로, 스타일 태그 내 부여와는 다릅니다. 다른 스타일보다는 우선 적용되지만, 스타일과 html 코드가 섞여 ..

html에서 단위는 여러 가지가 있습니다. 그러나 그 중에서 주로 사용하는 것은 퍼센트(%)와 픽셀(pixel; px) 입니다. 사용 예시는 위와 같은데,px은 그 값이 고정된 절대적인 값이 정해져 있고,%는 부모 태그의 값을 기준으로 상대적인 값을 갖는다는 것을 숙지해두면 좋을 것 같습니다.

"brackets"라는 에디터에는화면 분할하기 기능이 있습니다.  요 버튼을 누르면, 분할하기 관련된 메뉴가 표시됩니다.  기본적으로는 나누지 않음이나, 선택한 메뉴에 따라 창을 나누어서 사용할 수 있습니다. 왼쪽/오른쪽으로 분할 메뉴에 진입하면 기본적으로 이렇게 표시되는데, 좌상단에서 '왼쪽'에 있던 것을 drag & drop 하여 '오른쪽'으로 옮길 수 있습니다.  위/아래로 분할도 같은 원리입니다.  이상입니다.

html 파일에 스타일 요소를 추가할 수도 있지만,그렇게 계속해서 추가하다 보면html 파일의 구조를 알아보기 어려울 정도로 스타일 요소가 늘어나버리게 됩니다. 이런 경우에 두 가지 방법으로 스타일 요소를 분리할 수 있습니다.첫 번째 경우는 스타일 요소를 동일 파일 내 style 태그 안에 두는 방법이고,두 번째 경우가 오늘 소개하려는 외부 스타일 시트 입니다.   1. 먼저 작업하던 html 파일과 같은 위치나 다른 위치에 확장자가 css인 파일을 생성합니다.저는 이런 식으로 폴더를 생성해서 그 안에 css 확장자 파일을 만들었습니다. 경로는 편하신 곳으로 하셔도 좋습니다.  2. 만든 css 파일에 사용할 스타일을 작성합니다.저는 임의로 이렇게 작성했습니다.  3. 이제 기존 html에서 css 파일..

mark 태그는 '표시하다, 기록하다'는 뜻을 가진 영어 단어로,형광색으로 글자 배경색을 칠하듯이,일반적으로 노란색으로 글자 배경색을 칠하는 태그입니다.  mark 태그는주로 시각적으로 강조를 하기 위해 사용됩니다.특정 어휘를 다른 어휘들과 분리되어 강조하고 싶거나,검색된 특정 어휘에 색칠하여 보여주고 싶거나,사용자가 특정한 단어를 클릭할 때 등, 일반적인 다른 글자들과 강조하여 표시하기 위해 사용됩니다. 또한,기본적으로는 노란색으로 칠해지지만, CSS를 활용하면 다른 색으로 변경할 수 있습니다.  이상입니다.  비슷한 기능을 하는 태그 보러가기 https://free-weave.tistory.com/42 "u" 태그u 태그는 글자에 underline(밑줄) 속성을 추가하는 태그입니다.  시각적인 효과만..

u 태그는 글자에 underline(밑줄) 속성을 추가하는 태그입니다.  시각적인 효과만 있고, 특별히 의미는 없어서CSS를 활용하거나 더 의미있는 태그를 사용하는 것이 권장됩니다. 이상입니다.  비슷한 태그 보러가기https://free-weave.tistory.com/41 "i, em" 태그i는 italic의 i이고, em은 강조(emphasis)의 e를 의미합니다.  i 태그와 em 태그는 위와 같이 글자를 '기울임'이라는 시각적인 효과에 있어서는 차이가 없습니다. 그래서 용도에 맞게 분리되어 사용되free-weave.tistory.com https://free-weave.tistory.com/40 "b, strong" 태그글자를 강조하는 태그로, b 태그와 strong 태그가 있습니다. b 태그는..