Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 디스플레이 세 번째 시간으로 인라인 블록에 대해 알아봅시다! Display: Inline-Block 인라인 블록(Inline-Block)은 인라인과 블록을 합쳐 놓은 혼종입니다. (아몬께서 만드신) width와 height를 이용해서 블록의 크기를 정하고 그 블록들을 가로로 나열 할 수 있게 합니다. 생김새와 작동 아래의 코드를 실행해보겠습니다. 혼종1 혼종2 혼종3 /* CSS */ div { font-size: 50px; color: aliceblue; width: 300px; height: 300px; background-image: url("https://w.namu.la/s/47ec9f11f341310729db986719fdba6d85fb18c8a5194c6d05..

안녕하세요 동기 여러분! 오늘은 디스플레이 프로퍼티의 값인 블록에 대해 알아봅시다! Display: Block 어제는 필요한 만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 HTML의 요소들을 알아보았는데 오늘은 오면 바로 가로의 공간을 다 차지하는 블록 레벨 요소(Block-level element)들을 표로 정해보았습니다. 태그 설명 연락처 글, 기사 내용 어사이드 내용 (설명이나 따로 추가할 내용에 주로 씀) 긴 블록 형태의 인용문 (CSS로 설정해줘야 효과가 들어감) 사용자의 행동에 의해 보이거나 숨길 수 있는 정보를 담음 ( 태그와 기능은 비슷 ) 눌러줘 숨은 정보 등장 대화 상자 - Firefox, Internet Explorer 디스크립션 리스트에 있는 용어 설명 문서..

안녕하세요 동기 여러분! 오늘은 어제에 이어서 점보트론 아래에 내용을 채워주도록 하겠습니다! Supporting Content 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 동기의 디아블로 2 패치 노트 알아보기 육성법 세계관 파밍장소 대악마 밑에 를 두 개 넣고 그 안에 로 네 가지의 이미지와 설명을 넣어 주었습니다.

안녕하세요 동기 여러분! 오늘은 점보트론에 대해 알아보도록 합시다! The Jumbotron 많은 웹 사이트들이 중요한 정보를 적어놓은 쇼케이스를 메뉴 밑에다가 두는 경우가 많은데요, 이걸 부트스트랩에서 적용을 하려면 점보트론이 필요합니다. 그럼 하나씩 만들어 봅시다. 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 어제의 코드에 이어서 바로 밑에 -> 부트스트랩에서 container은 기본적으로 반응형입니다. -> 그리드를 알아볼 때 안에 자식 태그들을 적고 12개의 columns 나누어 주는 작업을 했습니다. 여기서 row는 있으나 없으나 크게 차이가 없습니다. text-center는 부트스트랩에서 글씨를 중앙으로 정렬해주는 역할을 수행합니다. 은 부트스트랩에서 버튼을 만들어주는 역할을 합니다...

건강하세요 동기 여러분! 오늘은 어제 알아본 그리드를 토대로 간단한 웹 페이지 헤더를 만들어 보도록 합시다. Header/Navigation 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 태그를 이용해 메뉴를 만들어 주는데 크기는 md로 768px 이상으로 주고 (모바일 환경 이상 사이즈) column의 수는 8개를 주었습니다. 에 4개를 주었으니 딱 12개가 맞아떨어집니다. 태그를 이용해서 네 가지의 메뉴를 넣어 주었습니다. 실행 한번 해볼까요? 뭔가 제가 원하는 모습이 아닌데요... main2.css로 들어가서 CSS를 조정하여 깔끔하게 꾸며 봅시다. 첫 번째로 추가할 CSS 코드 body { font-family: "나눔바른고딕", "Times New Roman", serif; font-we..

안녕하세요 동기 여러분! 오늘은 Article과 Section에 대해 알아봅시다. Article and Section 은 문서에 있는 요소들의 경계를 나타냅니다. 예를 들어 챕터나, 헤딩, 같은 테마인 문서의 다른 부분들이 그에 해당합니다. -> 말이 어렵죠? 제가 적어 놓고도 어렵네욬ㅋㅋ 그냥 독립적인 구역을 정의할 때 씁니다. 보통 같은 제목들을 포함합니다. 도 문서의 있는 요소들의 경계를 나타냅니다. 과 다른 점이 있다면 같지 않은 테마에 사용이 가능하다는 것. -> 역시 말이 어렵습니다. 그냥 역시 독립적인 구역을 정의할 때 쓰는데 이 비슷한 애들을 모은다면 은 다양한 애들을 모읍니다. 한 가지 더 을 사용하게 되면 screen reader가 어디서 article의 내용이 시작되고 끝나는지 이해 ..

안녕하세요 동기 여러분! 오늘은 Semantic HTML의 첫 번째 시간 Header와 Nav에 대해 알아보려 합니다. 주제에 다가가기 앞서 Semantic HTML이 뭔지 알아봅시다. Semantic HTML 여러분은 방에 있는 책들을 정리 할 때 어떻게 정리를 하시나요? 규칙 없이 마구 잡이로 책을 꽂아 넣는다면 → Non-semantic HTML 적절한 규칙으로 잘 정리한다면 → Semantic HTML입니다ㅎ * 사전에서의 Semantic : 의미의, 의미론적인 Jungle Disk에 Semantic HTML에 대해 잘 정리를 해두었는데 제가 링크한 사이트로 가셔서 스크롤을 내리다가 나오는 첫 번째 그림에서 Non-semantic HTML과 Semantic HTML의 특징을 아주 잘 표현하고 있습..

안녕하세요 동기 여러분! 오늘은 라디오 버튼 넣는 방법에 대해 알아봅시다! Radio Button Input 사용자에게 여러 가지의 옵션을 주고 하나 고르게 하고 싶을 때 쓰는 방법입니다. 생김새 1. 1963년 국내에 첫 출시하여 대한민국의 모든 인스턴트 라면의 원조이며 햄맛을 국물 베이스로 사용하고 있는 이 라면은 무엇인가? 1. 신라면 2. 진라면 3. 안성탕면 4. 수타면 5. 삼양라면 위의 코드를 출력하면 이렇게 라디오 버튼을 가지고 있는 문항들이 생겨납니다. 코드 분석 이전과 마찬가지로 의 for의 값과 의 값은 같아야 합니다. name은 "answer"로 모두 같게 설정을 해주는데 이유는 그룹화하기 위함입니다. 값은 식별이 용이하게 label의 내용과 연관있는 단어나 문장을 써서 넣어줍니다...

안녕하세요 동기 여러분! 오늘은 숫자만 넣을 수 있는 빈칸을 만드는 법에 대해 알아봅시다! Number Input 속성에 type="text"를 지난 시간까지 알아보았는데, 여기에 "number"를 넣는다면 어떤 일이 벌어질까요? 그렇게 된다면, 숫자만 사용할 수 있는 빈칸이 만들어지는데 이 빈칸에는 마이너스(-), 플러스(+), 점(.)도 사용이 가능합니다. 그리고 type 옆에 step 속성을 넣으면 다음과 같은 화살표 버튼이 만들어집니다. 생김새 마 니 몇살이고? 이전에 했던 방법과 마찬가지로 의 for와 의 id는 같은 값을 가져야 합니다. step="1"은 화살표를 누를 때 마다 더해지거나 빼지는 숫자를 의미합니다. (step="3"이면 숫자가 3씩 더해지거나 빼 짐) 응? 그게 다예요... ㅋ..

안녕하세요 동기 여러분~~~ 감기 조심하세요~~~ 오늘은 패스워드를 넣는 칸을 만들어 보도록 하겠습니다. Password Input 비밀번호! 생김새 너의 비밀번호는 무엇인고? 에 type을 "password"로만 바꾸어주면 된다. 그럼 비밀번호를 타이핑할 때 다음과 같은 화면이 나온다. 물론 을 안에 넣어 버려서 코드를 짧게 쓸 수도 있다. 너의 비밀번호는 무엇인고? 또다시 물론 form이 보내어질 때 userpassword="사용자가 적은 비밀번호"가 보내어지게 된다! 오늘의 느낌 오늘의 느낌은 Adding a Label 편에 올려두었다ㅋㅋㅋㅋㅋㅋ 궁금하지 않으신가